优化

src/views/technology/route/components/user-edit.vue

@@ -1,25 +1,13 @@
 <!-- 用户编辑弹窗 -->
 <template>
-  <ele-modal
-    width="1060px"
-    :visible="visible"
-    :append-to-body="true"
-    :close-on-click-modal="true"
-    custom-class="ele-dialog-form"
-    :title="isUpdate ? '修改工艺路线' : '添加工艺路线'"
-    @update:visible="updateVisible"
-  >
+  <ele-modal width="1060px" :visible="visible" :append-to-body="true" :close-on-click-modal="true"
+    custom-class="ele-dialog-form" :title="isUpdate ? '修改工艺路线' : '添加工艺路线'" @update:visible="updateVisible">
     <header-title title="基本信息"> </header-title>
     <el-form ref="form" :model="form" :rules="rules" label-width="140px">
       <el-row>
         <el-col :span="8">
           <el-form-item label="工艺路线组编码:" prop="code">
-            <el-input
-              clearable
-              disabled
-              v-model="form.code"
-              placeholder="请输入"
-            />
+            <el-input clearable disabled v-model="form.code" placeholder="请输入" />
           </el-form-item>
         </el-col>
 
@@ -31,29 +19,20 @@
         <el-col :span="8">
           <el-form-item label="所属工厂:" prop="factoryId">
             <el-select v-model="form.factoryId" placeholder="请选择" filterable>
-              <el-option
-                v-for="item in fList"
-                :key="item.id"
-                :label="item.name"
-                :value="item.id"
-              >
+              <el-option v-for="item in fList" :key="item.id" :label="item.name" :value="item.id">
               </el-option>
             </el-select>
           </el-form-item>
         </el-col>
         <el-col :span="8">
           <el-form-item label="产品名称:" prop="categoryName">
-            <el-input @click.native="chooseProduct" v-model="form.categoryName" readonly/>
+            <el-input @click.native="chooseProduct" v-model="form.categoryName" readonly />
           </el-form-item>
         </el-col>
 
         <el-col :span="8">
           <el-form-item label="产品编码:" prop="categoryCode">
-             <el-input
-               placeholder="自动带入"
-               disabled
-               v-model="form.categoryCode"
-             />
+            <el-input placeholder="自动带入" disabled v-model="form.categoryCode" />
           </el-form-item>
         </el-col>
 
@@ -65,12 +44,7 @@
         <el-col :span="8">
           <el-form-item label="状态:" prop="status">
             <el-select v-model="form.status" placeholder="" filterable>
-              <el-option
-                v-for="item in statusList"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              >
+              <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value">
               </el-option>
             </el-select>
           </el-form-item>
@@ -86,163 +60,163 @@
     </template>
 
     <!-- 选择产品弹窗 -->
-    <ProductModal ref="productRefs" @changeProduct='determineChoose'/>
+    <ProductModal ref="productRefs" @changeProduct='determineChoose' />
   </ele-modal>
 </template>
 
 <script>
-  import ProductModal from './ProductModal.vue';
-  import route from '@/api/technology/route';
+import ProductModal from './ProductModal.vue';
+import route from '@/api/technology/route';
 
 
-  export default {
-    components:{
-       ProductModal
-    },
-    props: {
-      // 弹窗是否打开
-      visible: Boolean,
-      // 修改回显的数据
-      data: Object
-    },
-    data() {
-      const defaultForm = {
-        code: '',
-        name: '',
-        factoryId: '',
-        status: -1,
-        categoryId: '',
-        version: '1.0',
-        id: '',
-        categoryCode: '',
-        categoryName: ''
-      };
-      return {
-        defaultForm,
-        fList: [], //仓库列表
-        categoryCode: '',
-        categoryName: '',
-        // 表单数据
-        form: { ...defaultForm },
+export default {
+  components: {
+    ProductModal
+  },
+  props: {
+    // 弹窗是否打开
+    visible: Boolean,
+    // 修改回显的数据
+    data: Object
+  },
+  data() {
+    const defaultForm = {
+      code: '',
+      name: '',
+      factoryId: '',
+      status: -1,
+      categoryId: '',
+      version: '1.0',
+      id: '',
+      categoryCode: '',
+      categoryName: ''
+    };
+    return {
+      defaultForm,
+      fList: [], //仓库列表
+      categoryCode: '',
+      categoryName: '',
+      // 表单数据
+      form: { ...defaultForm },
 
-        statusList: [
-          { label: '草稿', value: -1 },
-          { label: '失效', value: 0 },
-          { label: '生效', value: 1 }
-        ],
+      statusList: [
+        { label: '草稿', value: -1 },
+        { label: '失效', value: 0 },
+        { label: '生效', value: 1 }
+      ],
 
-        // 表单验证规则
-        rules: {
-          name: [
-            { required: true, message: '请输入工艺路线名称', trigger: 'blur' }
-          ],
-          code: [
-            { required: true, message: '请输入工艺路线编码', trigger: 'blur' }
-          ],
-          factoryId: [
-            { required: true, message: '请输入工艺路线', trigger: 'blur' }
-          ],
-          categoryCode: [
-            { required: true, message: '请选择产品编码', trigger: 'change' }
-          ],
-          categoryName: [
-            { required: true, message: '请选择产品名称', trigger: 'change' }
-          ],
-          status: [
-            { required: true, message: '请输入工艺路线版本', trigger: 'blur' }
-          ],
-          version: [
-            { required: true, message: '请输入工艺路线版本', trigger: 'blur' }
-          ]
-        },
-        // 提交状态
-        loading: false,
-        // 是否是修改
-        isUpdate: false
-      };
-    },
-    computed: {
-      statusTitle() {
-        return this.isUpdate ? '修改' : '保存';
+      // 表单验证规则
+      rules: {
+        name: [
+          { required: true, message: '请输入工艺路线名称', trigger: 'blur' }
+        ],
+        code: [
+          { required: true, message: '请输入工艺路线编码', trigger: 'blur' }
+        ],
+        factoryId: [
+          { required: true, message: '请输入工艺路线', trigger: 'blur' }
+        ],
+        categoryCode: [
+          { required: true, message: '请选择产品编码', trigger: 'change' }
+        ],
+        categoryName: [
+          { required: true, message: '请选择产品名称', trigger: 'change' }
+        ],
+        status: [
+          { required: true, message: '请输入工艺路线版本', trigger: 'blur' }
+        ],
+        version: [
+          { required: true, message: '请输入工艺路线版本', trigger: 'blur' }
+        ]
       },
-      // 是否开启响应式布局
-      styleResponsive() {
-        return this.$store.state.theme.styleResponsive;
-      }
+      // 提交状态
+      loading: false,
+      // 是否是修改
+      isUpdate: false
+    };
+  },
+  computed: {
+    statusTitle() {
+      return this.isUpdate ? '修改' : '保存';
     },
-    methods: {
-      chooseProduct(){
-         this.$refs.productRefs.open(this.form)
-      },
-      determineChoose(row){
-          this.$set(this.form,'categoryName',row.name)
-          this.$set(this.form,'categoryId',row.id)
-          this.$set(this.form,'categoryCode',row.code)
-      },
-      /* 保存编辑 */
-      save() {
-        this.$refs.form.validate((valid) => {
-          if (!valid) {
-            return false;
-          }
-          if (!this.data) {
-            delete this.form.id;
-          }
+    // 是否开启响应式布局
+    styleResponsive() {
+      return this.$store.state.theme.styleResponsive;
+    }
+  },
+  methods: {
+    chooseProduct() {
+      this.$refs.productRefs.open(this.form)
+    },
+    determineChoose(row) {
+      this.$set(this.form, 'categoryName', row.name)
+      this.$set(this.form, 'categoryId', row.id)
+      this.$set(this.form, 'categoryCode', row.code)
+    },
+    /* 保存编辑 */
+    save() {
+      this.$refs.form.validate((valid) => {
+        if (!valid) {
+          return false;
+        }
+        if (!this.data) {
+          delete this.form.id;
+        }
 
-          this.loading = true;
-          let title = this.isUpdate ? '修改' : '新建'; // 提交的名称或编号是否有效率有用的标识，
-       
+        this.loading = true;
+        let title = this.isUpdate ? '修改' : '新建'; // 提交的名称或编号是否有效率有用的标识，
 
-          route
-            .save(this.form)
-            .then((msg) => {
-              this.form = {};
-              this.categoryName = '';
-              this.categoryCode = '';
-              this.loading = false;
-              let tit = title + msg;
-              this.$message.success(tit);
-              this.updateVisible(false);
-              this.$emit('done');
-            })
-            .catch((e) => {
-              this.loading = false;
-              // this.$message.error(e.message);
-            });
-        });
-      },
-      /* 更新visible */
-      updateVisible(value) {
-        this.$emit('update:visible', value);
-      }
-    },
 
-    watch: {
-      async visible(visible) {
-        if (visible) {
-          const res = await route.Flist({
-            pageNum: 1,
-            size: -1,
-            type: 1
+        route
+          .save(this.form)
+          .then((msg) => {
+            this.form = {};
+            this.categoryName = '';
+            this.categoryCode = '';
+            this.loading = false;
+            let tit = title + msg;
+            this.$message.success(tit);
+            this.updateVisible(false);
+            this.$emit('done');
+          })
+          .catch((e) => {
+            this.loading = false;
+            // this.$message.error(e.message);
           });
-          this.fList = res.list;
-          if (this.data) {
-            const res = await route.getById(this.data.id);
+      });
+    },
+    /* 更新visible */
+    updateVisible(value) {
+      this.$emit('update:visible', value);
+    }
+  },
 
-            this.$util.assignObject(this.form, {
-              ...res
-            });
-            this.isUpdate = true;
-          } else {
-            const res = await route.getCode();
-            this.form.code = res;
-            this.isUpdate = false;
-          }
+  watch: {
+    async visible(visible) {
+      if (visible) {
+        const res = await route.Flist({
+          pageNum: 1,
+          size: -1,
+          type: 1
+        });
+        this.fList = res.list;
+        if (this.data) {
+          const res = await route.getById(this.data.id);
+
+          this.$util.assignObject(this.form, {
+            ...res
+          });
+          this.isUpdate = true;
         } else {
-          this.$refs.form.clearValidate();
-          this.form = { ...this.defaultForm };
+          const res = await route.getCode();
+          this.form.code = res;
+          this.isUpdate = false;
         }
+      } else {
+        this.$refs.form.clearValidate();
+        this.form = { ...this.defaultForm };
       }
     }
-  };
+  }
+};
 </script>