企业添加与修改

src/views/components/InputBoxAdd/index.vue

@@ -1,14 +1,14 @@
 <template>
   <el-form
-    ref="form"
-    :model="value"
-    :label-width="labelWidth + 'px'"
+    ref="formRef"
+    :model="modelValue"
+    :label-width="`${labelWidth}px`"
     :disabled="disabled"
   >
     <el-row>
       <el-col :span="24">
         <el-form-item
-          :label="title + ':'"
+          :label="`${title}:`"
           :prop="fieldKey"
           :rules="[
             {
@@ -27,9 +27,10 @@
               <el-button type="primary" @click="keyWordAdd">添加</el-button>
             </el-col>
           </el-row>
+
           <div class="e_tag">
             <el-tag
-              v-for="(tag, index) in this.value[fieldKey]"
+              v-for="(tag, index) in modelValue[fieldKey]"
               :key="index"
               closable
               @close="handleFieldClose(fieldKey, index)"
@@ -42,61 +43,66 @@
     </el-row>
   </el-form>
 </template>
-<script>
+<script setup name="InputBoxAdd">
 import { industry } from "@/api/config";
-export default {
-  props: {
-    value: Object,
-    labelWidth: {
-      type: Number,
-      default: 120,
-    },
-    title: {
-      type: String,
-      default: "",
-    },
-    placeholder: {
-      type: String,
-      default: "",
-    },
-    fieldKey: {
-      require: true,
-      type: String,
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
+import { ElMessage } from "element-plus";
+import { ref, toRefs } from "vue";
+
+const props = defineProps({
+  modelValue: Object,
+  labelWidth: {
+    type: Number,
+    default: 120,
   },
-  data() {
-    return {
-      dataVal: "",
-    };
+  title: {
+    type: String,
+    default: "",
   },
-  methods: {
-    keyWordAdd() {
-      if (!this.dataVal.length)
-        return this.$message.error("请输入" + this.title);
-      this.value[this.fieldKey].push(this.dataVal);
-      this.dataVal = "";
-    },
-    handleFieldClose(val, index) {
-      this.value[val].splice(index, 1);
-    },
-    submitForm() {
-      let flag = false;
-      this.$refs["form"].validate((valid) => {
-        flag = valid;
-      });
-      return flag;
-    },
+  placeholder: {
+    type: String,
+    default: "",
   },
+  fieldKey: {
+    require: true,
+    type: String,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const { modelValue, title, fieldKey, placeholder, disabled, labelWidth } =
+  toRefs(props);
+const dataVal = ref("");
+const formRef = ref(null);
+const keyWordAdd = () => {
+  if (!dataVal.value.length) return ElMessage.error(`请输入${title.value}`);
+  modelValue.value[fieldKey.value].push(dataVal.value);
+  dataVal.value = "";
 };
+const handleFieldClose = (val, index) => {
+  modelValue.value[val].splice(index, 1);
+};
+
+const validateForm = async () => {
+  try {
+    return await formRef.value.validate();
+  } catch (error) {
+    return false;
+  }
+};
+
+defineExpose({
+  validateForm,
+});
 </script>
+
 <style lang="scss" scoped>
 .e_tag {
+  width: 100%;
   .el-tag {
     margin-right: 10px;
   }
 }
-</style>
+</style>