修改自提点添加方式

src/views/groupon/groupon.vue

@@ -70,6 +70,20 @@
         </avue-crud>
       </template>
 
+      <!--  添加自提点插槽    -->
+      <template slot="selfTakeIdsForm">
+        <el-button type="primary" size="mini" @click="addSelfTakeBox = true">添 加</el-button>
+        <avue-crud :option="optionSFTable"
+                   :data="selfTakeList"
+                   ref="crudGoods">
+          <template #menu="{row,index,size}">
+            <el-button type="danger"
+                       size="mini"
+                       @click="rowDelSelfTake(row,index)">删除</el-button>
+          </template>
+        </avue-crud>
+      </template>
+
 
     </avue-crud>
 
@@ -129,12 +143,43 @@
         </template>
       </avue-crud>
     </el-dialog>
+
+
+    <!--  自提点列表dialog  -->
+    <el-dialog title="添加自提点"
+               append-to-body
+               :visible.sync="addSelfTakeBox"
+               :before-close="handleClose"
+               width="90%"
+               heigh="70%">
+      <avue-crud :option="selfTakeOption"
+                 :table-loading="selfTakeLoading"
+                 :data="selfTakeData"
+                 :page.sync="selfTakePage"
+                 v-model="selfTakeForm"
+                 ref="selfTakeCrud"
+                 @search-change="selfTakeSearchChange"
+                 @search-reset="selfTakeSearchReset"
+                 @selection-change="selfTakeSelectionChange"
+                 @current-change="selfTakeCurrentChange"
+                 @size-change="selfTakeSizeChange"
+                 @refresh-change="selfTakeRefreshChange"
+                 @on-load="selfTakeOnLoad">
+        <template slot="menuLeft">
+          <el-button type="primary"
+                     size="small"
+                     @click="submitSelfTake()">提 交
+          </el-button>
+        </template>
+      </avue-crud>
+    </el-dialog>
   </basic-container>
 </template>
 
 <script>
 import {getList, getDetail, add, update, remove, audit, modifyStatus} from "@/api/groupon/groupon";
 import {getList as getGoodsList} from "@/api/mall/goodsinfo";
+import {getList as getSelfTakeList} from "@/api/groupon/selftake";
 import {grouponOption} from "../../option/groupon/grouponOption"
 import {mapGetters} from "vuex";
 
@@ -143,6 +188,7 @@ export default {
     return {
       grouponOption: grouponOption,
       tableData: [],
+      selfTakeList: [],
       auditList: [
         {name: '通过', value: 1}, {name: '驳回', value: 2}
       ],
@@ -156,14 +202,31 @@ export default {
       },
       auditBox: false,
       addGoodsBox: false,
+      addSelfTakeBox: false,
       auditForm: {
         auditStatus: '',
         id: '',
         remark: ''
       },
       selectionList: [],
+      optionSFTable: {
+        menuWidth: 90,
+        refreshBtn: false,
+        columnBtn: false,
+        addBtn: false,
+        viewBtn: false,
+        editBtn: false,
+        delBtn: false,
+        column: [{
+          label: "名称",
+          prop: "name",
+        },
+          {
+            label: "地址",
+            prop: "address",
+          },]
+      },
       optionTable: {
-        // rowSort: true,
         menuWidth: 90,
         refreshBtn: false,
         columnBtn: false,
@@ -172,7 +235,6 @@ export default {
         editBtn: false,
         delBtn: false,
         sortable: true,
-        // keyId: 'goodsId',
         column: [{
           label: '商品图片',
           prop: 'goodsCover',
@@ -363,28 +425,12 @@ export default {
           {
             label: "自提点",
             prop: "selfTakeIds",
-            labelWidth: 120,
             span: 24,
-            rules: [{
-              required: true,
-              message: "请选择自提点",
-              trigger: "blur"
-            }],
+            fromslot: true,
             hide: true,
             editDisplay: false,
             viewDisplay: false,
             editDisabled: true,
-            type: "select",
-            multiple: true,
-            remote: true,
-            dicUrl: "/api/groupon/selftake/page?name={{key}}",
-            props: {
-              label: "name",
-              value: "id"
-            },
-            dicFormatter: function (res) {
-              return res.data.records;
-            },
           },
           {
             label: "团购商品",
@@ -392,6 +438,7 @@ export default {
             span: 24,
             fromslot: true,
             editDisplay: false,
+            viewDisplay: false,
             hide: true
           },
         ]
@@ -407,7 +454,54 @@ export default {
       grouponLoading: false,
       grouponForm: {},
       grouponQuery: {},
-      grouponSelectionList: []
+      grouponSelectionList: [],
+
+      selfTakePage: {
+        pageSize: 10,
+        currentPage: 1,
+        total: 0
+      },
+      selfTakeData: [],
+      selfTakeLoading: false,
+      selfTakeForm: {},
+      selfTakeQuery: {},
+      selfTakeSelectionList: [],
+      selfTakeOption: {
+        tip: false,
+        searchShow: true,
+        searchMenuSpan: 6,
+        border: true,
+        index: true,
+        viewBtn: false,
+        addBtn: false,
+        delBtn: false,
+        menu: false,
+        selection: true,
+        dialogClickModal: false,
+        column: [
+          {
+            label: "名称",
+            prop: "name",
+            search: true
+          },
+          {
+            label: "地址",
+            prop: "address",
+          },
+          {
+            label: "营业开始时间",
+            prop: "busStartTime",
+            valueFormat: 'HH:mm:ss',
+            type: "time",
+          },
+          {
+            label: "营业结束时间",
+            prop: "busEndTime",
+            valueFormat: 'HH:mm:ss',
+            type: "time",
+          },
+        ]
+      },
     };
   },
   computed: {
@@ -430,11 +524,30 @@ export default {
   },
   methods: {
     rowSave(row, done, loading) {
-      let goodsIds = [];
+      if (this.tableData.length === 0) {
+        this.$message.warning("请选择商品");
+        return;
+      }
+      if (this.selfTakeList.length === 0) {
+        this.$message.warning("请选择自提点");
+        return;
+      }
+      let grouponGoodsList = [];
       this.tableData.forEach(e => {
-        goodsIds.push(e.goodsId)
+        let g = {
+          goodsId: e.goodsId,
+          grouponPrice: e.grouponPrice
+        }
+        grouponGoodsList.push(g)
+      })
+      row.grouponGoodsList = grouponGoodsList;
+
+      let selfTakeIds = [];
+      this.selfTakeList.forEach(e => {
+        selfTakeIds.push(e.id)
       })
-      row.goodsIds = goodsIds;
+      row.selfTakeIds = selfTakeIds;
+
       add(row).then(() => {
         this.onLoad(this.page);
         this.$message({
@@ -506,6 +619,7 @@ export default {
         });
       }
       this.tableData = [];
+      this.selfTakeList = [];
       this.grouponSelectionList = [];
       done();
     },
@@ -563,6 +677,7 @@ export default {
       });
     },
     handleClose() {
+      this.addSelfTakeBox = false;
       this.addGoodsBox = false;
       this.auditBox = false;
       this.auditForm = {
@@ -649,9 +764,10 @@ export default {
         this.grouponPage.total = data.total;
         this.grouponData = data.records;
         this.grouponLoading = false;
-        this.selectionClear();
       });
     },
+
+    // 提交选择的商品
     submit() {
       if (this.grouponSelectionList.length === 0) {
         this.$message.warning("请选择至少一条数据");
@@ -678,15 +794,103 @@ export default {
           this.tableData.push(goods);
         }
       })
-
       this.addGoodsBox = false;
       this.grouponSelectionClear();
     },
+
+    /**
+     * 提交选择的自提点
+     */
+    submitSelfTake() {
+      if (this.selfTakeSelectionList.length === 0) {
+        this.$message.warning("请选择至少一条数据");
+        return;
+      }
+
+      let map = new Map();
+      this.selfTakeList.forEach(row => {
+        map.set(row.id, row.id);
+      })
+
+      this.selfTakeSelectionList.forEach(e => {
+        let g = map.get(e.id);
+        if (!g) {
+          let selfTake = {
+            id: e.id,
+            goodsId: e.id,
+            name: e.name,
+            address: e.address,
+            busStartTime: e.busStartTime,
+            busEndTime: e.busEndTime
+          }
+          this.selfTakeList.push(selfTake);
+        }
+      })
+      this.addSelfTakeBox = false;
+      this.selfTakeSelectionClear();
+    },
+
+    /**
+     * 删除商品
+     * @param row
+     * @param index
+     */
     rowDelGoods(row, index) {
-      console.log(row, index);
       this.tableData.splice(index, 1);
+    },
+
+    /**
+     * 删除自提点
+     * @param row
+     * @param index
+     */
+    rowDelSelfTake(row, index) {
+      this.selfTakeList.splice(index, 1);
+    },
+
+    // 自提点curd相关方法
+    selfTakeSearchReset() {
+      this.selfTakeQuery = {};
+      this.selfTakeOnLoad(this.selfTakePage);
+    },
+    selfTakeSearchChange(params, done) {
+      this.selfTakeQuery = params;
+      this.selfTakePage.currentPage = 1;
+      this.selfTakeOnLoad(this.selfTakePage, params);
+      done();
+    },
+    selfTakeSelectionChange(list) {
+      this.selfTakeSelectionList = list;
+    },
+    selfTakeSelectionClear() {
+      this.selfTakeSelectionList = [];
+      this.$refs.selfTakeCrud.toggleSelection();
+    },
+    selfTakeCurrentChange(currentPage){
+      this.selfTakePage.currentPage = currentPage;
+    },
+    selfTakeSizeChange(pageSize){
+      this.selfTakePage.pageSize = pageSize;
+    },
+    selfTakeRefreshChange() {
+      this.selfTakeOnLoad(this.selfTakePage, this.selfTakeQuery);
+    },
+    selfTakeOnLoad(page, params = {}) {
+      this.selfTakeLoading = true;
+      this.selfTakeQuery.status = 1;
+      getSelfTakeList(page.currentPage, page.pageSize, Object.assign(params, this.selfTakeQuery)).then(res => {
+        const data = res.data.data;
+        this.selfTakePage.total = data.total;
+        this.selfTakeData = data.records;
+        this.selfTakeLoading = false;
+      });
+
+    },
+    addSelfTakeHandle() {
+      this.addSelfTakeBox = true;
     }
-  }
+  },
+
 };
 </script>