feature：更新重泡货配置功能

src/views/ecw/zhongPao/index.vue

@@ -5,33 +5,50 @@
     <el-form ref="form" :model="form" :rules="rules" label-width="80px">
 
       <el-form-item label="泡货配置" prop="paoLinjie">
-        临界值：每CBM小于<el-input v-model="form.paoLinjie" placeholder="请输入泡货临界值" />Kg属于泡货
+        临界值：每CBM小于
+        <el-input v-model="form.paoLinjie" placeholder="请输入泡货临界值" style="width: 100px; "/>
+        Kg属于泡货
       </el-form-item>
       <el-form-item label="计算公式" prop="paoGs">
-        泡货重量（Kg）= 实际体积（CBM）X <el-input v-model="form.paoGs" placeholder="请输入泡货公式" />
+        泡货重量（Kg）=  实际体积（CBM）X
+        <el-input v-model="form.paoGs" placeholder="请输入泡货公式" style="width: 100px; "/>
       </el-form-item>
       <el-form-item label="货运方式" prop="paoYsIds">
-        <el-input v-model="form.paoYsIds" placeholder="请输入泡货货运方式ids" />
+        <el-checkbox-group v-model="form.paoYsIdList">
+          <el-checkbox v-for="dict in transportDatas" :label="dict.value" :key="dict.value" :value="dict.value"
+                       name="paoYsIds"> {{dict.label}}
+          </el-checkbox>
+        </el-checkbox-group>
       </el-form-item>
       <el-form-item label="泡货是否开启" prop="paoIsOpen">
         <el-radio-group v-model="form.paoIsOpen">
           <el-radio v-for="dict in this.getDictDatas(DICT_TYPE.COMMON_STATUS)"
-                    :key="dict.value" :label="parseInt(dict.value)">{{dict.label}}</el-radio>
+                    :key="dict.value" :label="parseInt(dict.value)">{{dict.label}}
+          </el-radio>
         </el-radio-group>
       </el-form-item>
+      <el-divider></el-divider>
       <el-form-item label="重货配置" prop="zhongLinjie">
-        临界值：每CBM大于<el-input v-model="form.zhongLinjie" placeholder="请输入重货临界值" />Kg属于重货
+        临界值：每CBM大于
+        <el-input v-model="form.zhongLinjie" placeholder="请输入重货临界值" style="width: 100px; "/>
+        Kg属于重货
       </el-form-item>
       <el-form-item label="计算公式" prop="zhongGs">
-        重货体积（CBM） = 实际重量（Kg）X<el-input v-model="form.zhongGs" placeholder="请输入重货公式" />
+        重货体积（CBM） =  实际重量（Kg）X
+        <el-input v-model="form.zhongGs" placeholder="请输入重货公式" style="width: 100px; "/>
       </el-form-item>
       <el-form-item label="货运方式" prop="zhongYsIds">
-        <el-input v-model="form.zhongYsIds" placeholder="请输入重货货运方式ids" />
+        <el-checkbox-group v-model="form.zhongYsIdList">
+          <el-checkbox v-for="dict in transportDatas" :label="dict.value" :key="dict.value" :value="dict.value"
+                       name="zhongYsIds"> {{dict.label}}
+          </el-checkbox>
+        </el-checkbox-group>
       </el-form-item>
       <el-form-item label="重货是否开启" prop="zhongIsOpen">
         <el-radio-group v-model="form.zhongIsOpen">
           <el-radio v-for="dict in this.getDictDatas(DICT_TYPE.COMMON_STATUS)"
-                    :key="dict.value" :label="parseInt(dict.value)">{{dict.label}}</el-radio>
+                    :key="dict.value" :label="parseInt(dict.value)">{{dict.label}}
+          </el-radio>
         </el-radio-group>
       </el-form-item>
     </el-form>
@@ -43,101 +60,142 @@
 </template>
 
 <script>
-import { createZhongPao, updateZhongPao, deleteZhongPao, getZhongPao, getZhongPaoPage, exportZhongPaoExcel } from "@/api/ecw/zhongPao";
+  import {
+    createZhongPao,
+    updateZhongPao,
+    deleteZhongPao,
+    getZhongPao,
+    getZhongPaoPage,
+    exportZhongPaoExcel
+  } from "@/api/ecw/zhongPao";
+  import {getDictDatas, DICT_TYPE} from '@/utils/dict';
 
-export default {
-  name: "ZhongPao",
-  components: {
-  },
-  data() {
-    return {
-      // 遮罩层
-      loading: true,
-      // 导出遮罩层
-      exportLoading: false,
-      // 显示搜索条件
-      showSearch: true,
-      // 总条数
-      total: 0,
-      // 重泡货配置列表
-      list: [],
-      // 弹出层标题
-      title: "",
-      // 是否显示弹出层
-      open: false,
-      dateRangeCreateTime: [],
-      // 查询参数
-      queryParams: {
-        pageNo: 1,
-        pageSize: 10,
-        paoIsOpen: null,
-        zhongIsOpen: null,
-      },
-      // 表单参数
-      form: {},
-      // 表单校验
-      rules: {
-        paoIsOpen: [{ required: true, message: "泡货是否开启不能为空", trigger: "blur" }],
-        zhongIsOpen: [{ required: true, message: "重货是否开启不能为空", trigger: "blur" }],
-      }
-    };
-  },
-  created() {
-    this.getList();
-  },
-  methods: {
-    /** 查询列表 */
-    getList() {
-      this.loading = true;
-      // 处理查询参数
-      let params = {...this.queryParams};
-      this.addBeginAndEndTime(params, this.dateRangeCreateTime, 'createTime');
-      // 执行查询
-      getZhongPaoPage(params).then(response => {
-        var list = response.data.list;
-        this.form = list && list.length > 0 ? list[0] : {
-          id: undefined,
-          paoLinjie: undefined,
-          paoGs: undefined,
-          paoYsIds: undefined,
-          paoIsOpen: undefined,
-          zhongLinjie: undefined,
-          zhongGs: undefined,
-          zhongYsIds: undefined,
-          zhongIsOpen: undefined
-        };
+  export default {
+    name: "ZhongPao",
+    components: {},
+    data() {
+      return {
+        // 遮罩层
+        loading: true,
+        // 导出遮罩层
+        exportLoading: false,
+        // 显示搜索条件
+        showSearch: true,
+        // 总条数
+        total: 0,
+        // 重泡货配置列表
+        list: [],
+        // 弹出层标题
+        title: "",
+        // 是否显示弹出层
+        open: false,
+        dateRangeCreateTime: [],
+        // 查询参数
+        queryParams: {
+          pageNo: 1,
+          pageSize: 10
+        },
+        // 表单参数
+        form: {
+          paoYsIdList: [],
+          zhongYsIdList: [],
+        },
+        // 表单校验
+        rules: {
+          paoIsOpen: [{required: true, message: "泡货是否开启不能为空", trigger: "blur"}],
+          zhongIsOpen: [{required: true, message: "重货是否开启不能为空", trigger: "blur"}],
+          paoYsIdList: [
+            {type: 'array', required: true, message: '泡货请至少选择一个货运方式', trigger: 'change'}
+          ],
+          zhongYsIdList: [
+            {type: 'array', required: true, message: '重货请至少选择一个货运方式', trigger: 'change'}
+          ],
 
-        console.log(this.form);
-
-        this.total = response.data.total;
-        this.loading = false;
-      });
+        },
+        transportDatas: getDictDatas(DICT_TYPE.ECW_TRANSPORT_TYPE)
+      };
     },
-    /** 取消按钮 */
-    cancel() {
+    created() {
       this.getList();
     },
-    /** 提交按钮 */
-    submitForm() {
-      this.$refs["form"].validate(valid => {
-        if (!valid) {
-          return;
-        }
-        // 修改的提交
-        if (this.form.id != null) {
-          updateZhongPao(this.form).then(response => {
+    methods: {
+      /** 查询列表 */
+      getList() {
+        this.loading = true;
+        // 处理查询参数
+        let params = {...this.queryParams};
+        this.addBeginAndEndTime(params, this.dateRangeCreateTime, 'createTime');
+        // 执行查询
+        getZhongPaoPage(params).then(response => {
+
+          let list = response.data.list;
+
+          if (list && list.length > 0) {
+            this.form = list[0];
+
+            if (this.form.zhongYsIds) {
+              let ckList = this.form.zhongYsIds.split(',');
+              this.$set(this.form, 'zhongYsIdList', ckList);
+            }
+
+            if (this.form.paoYsIds) {
+              let ckList = this.form.paoYsIds.split(',');
+              this.$set(this.form, 'paoYsIdList', ckList);
+            }
+          } else {
+            this.form = {
+              id: undefined,
+              paoLinjie: undefined,
+              paoGs: undefined,
+              paoYsIds: undefined,
+              paoYsIdList: [],
+              paoIsOpen: undefined,
+              zhongLinjie: undefined,
+              zhongGs: undefined,
+              zhongYsIds: undefined,
+              zhongYsIdList: [],
+              zhongIsOpen: undefined
+            };
+          }
+
+          this.total = response.data.total;
+          this.loading = false;
+        });
+      },
+      /** 取消按钮 */
+      cancel() {
+        this.getList();
+      },
+      /** 提交按钮 */
+      submitForm() {
+        this.$refs["form"].validate(valid => {
+          if (!valid) {
+            return;
+          }
+          
+          this.form.paoYsIds = this.form.paoYsIdList.join(",");
+          this.form.zhongYsIds = this.form.zhongYsIdList.join(",");
+
+          this.form.zhongYsIdList = [];
+          this.form.paoYsIdList = [];
+
+          // 修改的提交
+          if (this.form.id != null) {
+            updateZhongPao(this.form).then(response => {
+              
+              this.$modal.msgSuccess("保存配置成功");
+              this.getList();
+            });
+            return;
+          }
+
+          // 添加的提交
+          createZhongPao(this.form).then(response => {
             this.$modal.msgSuccess("保存配置成功");
             this.getList();
           });
-          return;
-        }
-        // 添加的提交
-        createZhongPao(this.form).then(response => {
-          this.$modal.msgSuccess("保存配置成功");
-          this.getList();
         });
-      });
+      }
     }
-  }
-};
+  };
 </script>