4.29 别名

src/pages/Middle/transport/SoilQualityMaterial/SoilQualityMaterial/Edit.vue

@@ -1,5 +1,58 @@
 <template>
-  <basic-page-edit  :dataId="getDataId()" :options="pageOptions"></basic-page-edit>
+  <div class="page-body">
+    <!-- <basic-page-edit  :dataId="getDataId()" :options="pageOptions"></basic-page-edit> -->
+    <vxe-form :data="formOptions.data" ref="xForm" :title-width="formOptions.titleWidth"
+                :title-align="formOptions.titleAlign" :rules="formOptions.rules" titleColon>
+        <!--  =========================== 自定义区域 Start  ======================= -->
+        <vxe-form-item v-for="(item,index) in formOptions.items" :title="item.title" :field="item.field"   :span="item.span" :key="index" :item-render="item.itemRender">
+          <div v-if="item.isTitle" class="Htitle">
+            <div class="left-line"></div>
+            <p class="Htitle-p">
+              {{ item.Htitle }}
+            </p>
+            <div style="padding-right: 10px;" v-if="item.needAdd"><vxe-button size="small" status="primary" @click="addTrainNumber" content="新增车次"></vxe-button></div>
+            <div class="right-line"></div>
+          </div>
+        </vxe-form-item>
+        <!--  =========================== 自定义区域 End  ======================= -->
+      </vxe-form>
+      <div class="tablebox" v-if="isEdit&&soilQualityMaterialAliasList.length>0">
+        <div  class="Htitle" style="margin-bottom: 20px;">
+          <div class="left-line"></div>
+          <p class="Htitle-p">别名管理</p>
+          <div class="right-line"></div>
+        </div>
+        <vxe-table border show-overflow keep-source ref="xTable" :data="soilQualityMaterialAliasList"
+        @pulldownSelected="onPulldownSelected" @popupSelected="onPopupSelected"
+        :edit-config="{ trigger: 'click', mode: 'cell', icon: 'vxe-icon-edit', showStatus: false }" 
+        >
+          <vxe-column width="60">
+            <template #default="{ row }">
+              <div style="font-size: 18px;">
+                <a @click.stop="pageAdd(row)" title="新增" style="margin-right: 5px;">
+                  <a-icon type="plus-circle" />
+                </a>
+                <a @click.stop="pageDelete(row)" title="删除">
+                  <a-icon type="delete" />
+                </a>
+              </div>
+            </template>
+          </vxe-column>
+          <vxe-column type="seq" width="60"></vxe-column>
+          <vxe-column field="customer" title="客户" :params="editorCustomer" formatter="formatRef" :edit-render="{ name: 'MkGridDataSelector' }"></vxe-column>
+          <vxe-column field="name" title="别名" :edit-render="{ name: '$input'}"></vxe-column>
+          <vxe-column field="price" title="单价"  :edit-render="{ name: '$input',props: { type: 'number' } }"></vxe-column>
+          <!-- <vxe-column field="remark" title="备注" :edit-render="{ name: '$input' }"></vxe-column> -->
+          
+        </vxe-table>
+      </div>
+      <div class="footerbar">
+        <a-button type="primary" @click="ok">确定</a-button>
+        <a-button @click="cancel">取消</a-button>
+      </div>
+
+  </div>
+ 
 </template>
 
 <script>
@@ -19,31 +72,6 @@ export default {
   },
 
   data() {
-
-    return {
-      pageOptions: {}
-    };
-  },
-
-  computed: {
-    // desc() {
-    //   return this.$t('editPageDesc')
-    // }
-  },
-
-
-  created() {
-
-    this.optionsInit();
-    this.dataInit();
-
-  },
-  // 函数
-  methods: {
-
-
-    optionsInit() {
-      // 页面数据变量
     var pageData = {
         // 当前项目名称
         currentConfigName: "",
@@ -83,14 +111,25 @@ export default {
 
           // =============================== 接口地址 自动生成 End ===============================
         },
-
+        editorCustomer: {
+          name: "Custom",
+          modelName: "Custom",
+          listdataFieldName:'Custom',
+          columns: [
+            { field: 'name', title: '名称' },
+            { field: 'code', title: '编号' }
+          ],
+          placeholder: "请输入名称或者编号",
+          searchFieldNames: ['name', 'code'],
+          textField: 'name',
+          dataUrl: `${BASE_URL.BASE_URL}/Custom/v1/custom/list`
+        },
         keyName: 'id',
         // 是否编辑模式
         isEdit: false,
         // 表单数据
         formOptions: {
           data: {
-
             id: 0,
             code: "",
             name: "",
@@ -142,7 +181,8 @@ export default {
         },
         // 新增模式表单项
         addModeItems: [],
-
+        soilQualityMaterialAliasList: [],
+        deleteList:[],
 
       };
 
@@ -152,19 +192,34 @@ export default {
 
       // 合并表单数据及配置
       pageData.formOptions = Object.assign({}, this.$mk.config.defaults.formOptions, pageData.formOptions);
-
+    return pageData
-      this.pageOptions = pageData;
   },
 
+  computed: {
+    // desc() {
+    //   return this.$t('editPageDesc')
+    // }
+  },
+
+
+  created() {
+
+    // this.optionsInit();
+    this.dataInit();
+
+  },
+  // 函数
+  methods: {
+
     dataInit() {
       // 获取路由的id参数
       let dataId = this.getDataId();
+      let that = this;
       // 如果有id参数，说明是编辑模式
       if (dataId) {
         const json = `{"id":${dataId}}`;
         this.$mk.post({
-          url: this.pageOptions.actions.get,
+          url: this.actions.get,
-          loading: "加载中...",
           data: json,
           config: {
             headers: {
@@ -173,7 +228,7 @@ export default {
           }
         }).then(a => {
 
-          let detailDataFieldName = this.pageOptions.detailDataFieldName;
+          let detailDataFieldName = this.detailDataFieldName;
 
           let rules = [
             {field: "warehouse_effective_date", dataRule: "timestamp"},
@@ -184,24 +239,67 @@ export default {
           rules = []; //上面几个字段如果不需要在表单显示，可以不转换（不转换的话，表单拿到的是什么数据，提交的时候就是什么数据）
           this.$mk.formatInitFormData({
             data: a.data[detailDataFieldName],
-            rules: [...this.pageOptions.formOptions.items, ...rules]
+            rules: [...this.formOptions.items, ...rules]
           }); //建议固定格式化写法
 
-          this.pageOptions.formOptions.data = a.data[detailDataFieldName];
+          this.formOptions.data = a.data[detailDataFieldName];
 
           this.$forceUpdate()
         }).catch((a) => {
           this.$mk.error(a.data.msg);
         });
 
-        this.pageOptions.isEdit = true;
+        this.isEdit = true;
+        this.$mk.post({
+          url: this.actions.SoilQualityMaterialAliasList,
+          data: {
+            "search_rules": [
+            {
+              "column": "soil_quality_material_id",
+              "mode": "=",
+              "value": dataId
+            }
+            ],
+            "page": 1,
+            "limit": 20,
+            "end_time": 0,
+            "order_bys": [
+            ],
+            "start_time": 0
+          }
+        }).then(res=>{
+          console.log(res)
          
+          if(res.data.SoilQualityMaterialAlias == null){
+            that.soilQualityMaterialAliasList =[{
+              id:null,
+              customer:null,
+              customer_id:'',
+              name:'',
+              price:'',
+              remark:'',
+            }]
+          }else{
+            res.data.SoilQualityMaterialAlias.forEach(item => {
+              item.customer = [item.customer_id,item.customer_name]
+              that.soilQualityMaterialAliasList.push({
+                id:item.id,
+                customer:item.customer,
+                customer_id:item.customer_id,
+                name:item.name,
+                price:item.price,
+                remark:item.remark,
+              })
+            })
+            console.log(that.soilQualityMaterialAliasList)
+          }
+        })
         this.$forceUpdate()
       } else {
         // 如果没有id参数，说明是新增模式
       if(this.addModeItems){
           this.addModeItems.forEach(item => {
-          this.pageOptions.formOptions.items.push(item);
+          this.formOptions.items.push(item);
       })
       }
 
@@ -218,10 +316,180 @@ export default {
         dataId = 0;
       }
       return dataId;
+    },
+    // 新增
+    pageAdd(row) {
+      const $table = this.$refs['xTable']
+      const record = {
+          id:null,
+          customer:null,
+          customer_id:'',
+          name:'',
+          price:'',
+          remark:'',
       }
+      if (row) {
+        this.soilQualityMaterialAliasList.splice($table.getRowSeq(row), 0, record);
+      } else {
+        this.soilQualityMaterialAliasList.push(record)
+      }
+      console.log(this.soilQualityMaterialAliasList)
+    },
+
+    pageDelete(row) {
+      const $table = this.$refs['xTable']
+      if (this.soilQualityMaterialAliasList.length == 1) {
+        this.$mk.error("至少保留一行");
+        return;
+      }
+      if (row.id) {
+        this.deleteList.push({
+          Status: 'deleted',
+          id: row.id,
+          soil_quality_material_id:this.getDataId()
+        })
+      }
+      this.soilQualityMaterialAliasList.splice($table.getRowSeq(row) - 1, 1);
+    },
+    onPulldownSelected({ row, name, params }) {
+      if (name == 'Custom') {
+        this.updateToGrid(row, this.soilQualityMaterialAliasList[params.$rowIndex]);
+        return;
+      }
+      setTimeout(() => {
+        this.$refs.xTable.clearEdit();
+      }, 50);
+    },
+    onPopupSelected({ rows, name, params }) {
+      console.log(rows, name, params);
+      for (let i = params.$rowIndex, ri = 0; i < params.$rowIndex + rows.length; i++, ri++) {
+        if (i == this.detailsData.length) {
+          let newrow = {};
+          this.detailsData.push(newrow);
+        }
+        let inv = rows[ri];
+
+        this.updateToGrid(inv, this.detailsData[i]);
+      }
+
+      setTimeout(() => {
+        this.$refs.xTable.clearEdit();
+      }, 50);
+      },
+    updateToGrid(inv, row) {
+      console.log(inv)
+      var updateRow = {
+      };
+      updateRow.customer_id =inv.customer[0];
+      updateRow.customer_name =inv.customer[1];
+      Object.assign(row, updateRow);
+    },
+    // 保存
+    ok() {
+      let save = () => {
+
+        // 如果是新增模式，提交新增接口 如果是编辑模式，提交编辑接口
+        let action = !this.isEdit ? this.actions.create : this.actions.update;
+        // 如果是新增模式，提交的数据中加入id 如果是编辑模式，提交的数据中不加入id
+        let postdata = Object.assign({}, this.formOptions.data);
+        // 如果是编辑模式
+        if (this.isEdit) {
+          // postdata = { TrainNumber: postdata }
+        }
+        // 格式化提交的数据
+        this.$mk.formatFormData({data: postdata, rules: this.formOptions.items});
+
+
+        // 提交数据
+        this.$mk.post({
+          url: action,
+          loading: "保存中...",
+          data: postdata,
+          useBigInt: true,
+        }).then(() => { // 成功回调
+          let insertList = [];
+          let updateList = [];
+          let deleteList = this.deleteList;
+          
+          this.soilQualityMaterialAliasList.forEach(item => {
+            item.customer_id = this.$mk.toBigInt(item.customer_id);
+            item.price = Number(item.price);
+            item.soil_quality_material_id = postdata.id;
+            if(item.id){
+              updateList.push(item)
+            }else if(item.customer_id){
+              insertList.push(item)
+            }
+          })
+          this.$mk.post({
+            url: this.actions.SoilQualityMaterialAliasBatchHandle,
+            data: {insertList,updateList,deleteList},
+            useBigInt: true,
+          }).then(() => { // 成功回调 
+          })
+          this.$mk.success("保存成功");
+          if (!this.isEdit) { // 如果是新增模式，关闭当前页面
+            this.back();
+            this.$forceUpdate()
+          }
+        }).catch((a) => { // 失败回调
+          this.$mk.error(a.data.msg); // 显示错误信息
+        });
+
+
+};
+
+// 验证表单
+this.$mk.validateForm({form: this.$refs.xForm}).then(() => { // 验证表单
+  save(); // 提交保存
+}).catch(count => { // 验证失败
+  this.$mk.error(`存在${count}项错误，请检查`);
+});
+
+
+    },
+    // 取消 返回
+    cancel() {
+    this.back();
+    },
+     // 返回
+     back() {
+      if (this.addPageUrl) {
+        // 如果是新增模式，关闭当前页面
+        if (!this.isEdit) {
+          this.$closePage({
+            closeRoute: this.addPageUrl
+          });
+        } else {
+          this.$closePage({
+            closeRoute: this.editPageUrl
+          });
+        }
+        // 打开列表页面
+        this.$openPage(this.listPageUrl)
+      } else {
+        this.$emit("callback", { success: true });
+      }
+
+    },
   },
   // 监听属性
   watch: {}
 };
 
 </script>
+<style scoped lang="less">
+.Htitle{
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding-left: 10px;
+  .Htitle-p{margin-bottom: 0;margin: 0 10px;  color: #122ed1;  font-size: 16px;}
+  .left-line{width: 40px;height: 1px;background-color:#122ed1;}
+  .right-line{flex-grow: 1;height: 1px;background-color:#122ed1;}
+}
+.tablebox{
+  padding: 10px 0;    
+}
+</style>