feat:自提点页面

src/pages/Activity/releaseProduc/components/spellOrderSet.vue

@@ -12,20 +12,22 @@
   </div>
   <div>
     <el-card>
-      <span >自提点设置</span>
+      <span>自提点设置</span>
       <el-form ref="form" :model="selfLiftingPoint" label-width="80px">
         <el-form-item>
           <el-input
-          class="set"
+            class="set"
             v-model="selfLiftingPoint"
             placeholder="自提点名称/自提点联系人"
             suffix-icon="el-icon-search"
           ></el-input>
-          <el-button type="primary" @click="dialogFormVisible = true">添加自提点</el-button>
+          <el-button type="primary" @click="dialogFormVisible = true"
+            >添加自提点</el-button
+          >
         </el-form-item>
-          <span class="checked">已选</span>
+        <span class="checked">已选</span>
         <el-table
-        class="tabList"
+          class="tabList"
           ref="multipleTable"
           :data="tableData"
           border
@@ -87,22 +89,54 @@
         </el-table>
       </el-form>
       <!-- 添加自提点 -->
-      <el-dialog title="添加自提点" v-model="dialogFormVisible">
-  <el-form :model="form">
-    <el-form-item label="自提点名称" :label-width="formLabelWidth">
-      <el-input v-model="form.name" autocomplete="off"></el-input>
-    </el-form-item>
-    <el-form-item label="位置" :label-width="formLabelWidth">
-      <el-input v-model="form.name" placeholder=""></el-input>
-    </el-form-item>
-  </el-form>
-  <template #footer>
-    <span class="dialog-footer">
-      <el-button @click="dialogFormVisible = false">取 消</el-button>
-      <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
-    </span>
-  </template>
-</el-dialog>
+      <el-dialog
+        title="添加自提点"
+        v-model="dialogFormVisible"
+        :show-close="false"
+      >
+        <el-form style="margin-left: 70px" :model="form">
+          <el-form-item label="自提点名称" :label-width="formLabelWidth">
+            <el-input
+              class="dialog-input"
+              v-model="form.name"
+              maxlength="30"
+              show-word-limit
+              autocomplete="off"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="位置" :label-width="formLabelWidth">
+            <el-input
+              class="dialog-input"
+              v-model="form.location"
+              placeholder=""
+            ></el-input>
+            <a href="javascript:;" style="margin-left: 30px">从高德获取坐标</a>
+          </el-form-item>
+          <p class="location">北京市朝阳区酒仙桥9号恒通国际创新园</p>
+          <el-form-item label="详细地址" :label-width="formLabelWidth">
+            <el-input class="dialog-input" v-model="model"></el-input>
+          </el-form-item>
+          <el-form-item label="自提点联系人" :label-width="formLabelWidth">
+            <el-input
+              class="dialog-input"
+              v-model="model"
+              maxlength="30"
+              show-word-limit
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="联系电话" :label-width="formLabelWidth">
+            <el-input class="dialog-input" v-model="model"></el-input>
+          </el-form-item>
+        </el-form>
+        <template #footer>
+          <span class="dialog-footer">
+            <el-button type="primary" @click="dialogFormVisible = false"
+              >保 存</el-button
+            >
+            <el-button @click="dialogFormVisible = false">取 消</el-button>
+          </span>
+        </template>
+      </el-dialog>
     </el-card>
   </div>
 </template>
@@ -119,6 +153,9 @@ export default {
       selfLiftingPoint: "",
       tableData: [],
       multipleSelection: [],
+      dialogFormVisible: false,
+      formLabelWidth: "120px",
+      form: {},
     };
   },
   methods: {
@@ -136,18 +173,29 @@ export default {
   margin: 50px 0;
 }
 .set {
-    width: 50%;
-    margin-top: 40px;
-  }
-  .el-button {
-    margin-left: 30px;
-  }
-  .tabList {
-    margin-top: 10px;
-    margin-left: 75px;
-  }
-  .checked {
-    margin-left: 80px;
-
-  }
-</style>
+  width: 50%;
+  margin-top: 40px;
+}
+.el-button {
+  margin-left: 30px;
+}
+.tabList {
+  margin-top: 10px;
+  margin-left: 75px;
+}
+.checked {
+  margin-left: 80px;
+}
+.dialog-input {
+  width: 50%;
+}
+.location {
+  margin-bottom: 10px;
+  margin-left: 14%;
+}
+.dialog-footer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style> 

src/pages/Groupmeal/Distrib/index.vue

+<template>
+  <Layout>
+    <el-card class="goods">
+      <div class="header">
+        <el-button type="primary" @click="assignDeliverer"
+          >分配配送员</el-button
+        >
+        <el-button type="primary" @click="dialogFormAdd = true"
+          >添加配送员</el-button
+        >
+      </div>
+      <el-table :data="distribList" border stripe style="width: 100%">
+        <el-table-column
+          align="center"
+          prop="activeName"
+          label="活动名称"
+          width="width"
+        >
+        </el-table-column>
+        <el-table-column align="center" label="配送员数量" width="width">
+          <template #default="scope">
+            {{ scope.row.list.length }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          align="center"
+          prop="deliverer_name"
+          label="配送人员"
+          width="width"
+        >
+          <template #default="scope">
+            {{ scope.row.list.map((item) => item.deliverer_name).join("、") }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="prop" label="操作" width="width" align="center">
+          <template #default="scope">
+            <el-button type="primary" @click="handleModify(scope.row)" 
+              >修改</el-button
+            >
+            <el-button
+              type="primary"
+              v-show=scope.row.url
+              @click="handleDownload(scope.row.url)"
+              >下载配送路线</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+      <!-- 页码区 -->
+      <Pagination
+      @current-change="handleCurrentChange"
+      v-model.current-page="page"
+      :page-size="pageSize"
+      :total="total"
+      ></Pagination>
+      <!-- 添加配送员弹框 -->
+      <el-dialog
+        title="添加配送员"
+        v-model="dialogFormAdd"
+        width="70%"
+        :show-close="false"
+      >
+        <el-form class="dioFor" :model="addDeliverer" :rules="rules">
+          <el-form-item label="姓名" label-width="100px" prop="name">
+            <el-input
+              v-model="addDeliverer.name"
+              maxlength="10"
+              type="text"
+              show-word-limit
+              clearable
+              autocomplete="off"
+              @input="
+                addDeliverer.name = $event
+                  .replace(/[^a-z0-9A-Z\u4e00-\u9fa5()()\\-]+/g, '')
+                  .replace(/\s/g, '')
+              "
+            ></el-input>
+          </el-form-item>
+          <el-form-item
+            label="配送上限"
+            label-width="100px"
+            prop="max_capacity"
+          >
+            <el-input
+              v-model.number="addDeliverer.max_capacity"
+              onkeyup="value=value.replace(/[^\d]/g,'')"
+              clearable
+              autocomplete="off"
+              @input="
+                addDeliverer.max_capacity = $event
+                  .replace(/[^a-z0-9A-Z\u4e00-\u9fa5()()\\-]+/g, '')
+                  .replace(/\s/g, '')
+              "
+            ></el-input>
+          </el-form-item>
+          <el-form-item
+            label="最小配送量"
+            label-width="100px"
+            prop="min_capacity"
+          >
+            <el-input
+              v-model.number="addDeliverer.min_capacity"
+              onkeyup="value=value.replace(/[^\d]/g,'')"
+              clearable
+              autocomplete="off"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="配送工具" label-width="100px" prop="tool_type">
+            <el-select
+              v-model="addDeliverer.tool_type"
+              clearable
+              placeholder="请选择配送工具"
+            >
+              <el-option label="电动车" value="1"></el-option>
+              <el-option label="摩托车" value="2"></el-option>
+            </el-select>
+          </el-form-item>
+        </el-form>
+        <template #footer>
+          <span class="dialog-footer">
+            <el-button @click="addCancel">取 消</el-button>
+            <el-button type="primary" @click="addSave">保 存</el-button>
+          </span>
+        </template>
+      </el-dialog>
+      <!-- 分配配送员弹框 -->
+      <el-dialog
+        title="分配配送员"
+        v-model="dialogFormAssign"
+       width="70%"
+        :show-close="false"
+      >
+        <el-form class="dioFor">
+          <el-form-item label="活动名称" label-width="100px">
+            <el-select
+              v-model="selectActivity"
+              :disabled="isEdit"
+              clearable
+              filterable
+            >
+              <el-option :label="item.label" :value="item.value" v-for="item in marketingList" :key="item.value"></el-option>
+            </el-select>
+          </el-form-item>
+          <span class="dioFor">已选:{{ multipleSelection.length }}人</span>
+          <el-table
+            ref="multipleTable"
+            class="diotab"
+            align="center"
+            :data="deliverer"
+            max-height="300"
+            border
+            size="small"
+            style="width: 100%"
+            @selection-change="selectGoodsChange"
+          >
+            <el-table-column
+              width="60"
+              align="center"
+              type="selection"
+            >
+            </el-table-column>
+            <el-table-column
+              align="center"
+              prop="deliverer_name"
+              label="配送员姓名"
+            >
+            </el-table-column>
+            <el-table-column
+              align="center"
+              prop="deliverer_max_capacity"
+              label="配送上限"
+              width="130"
+            >
+            </el-table-column>
+            <el-table-column
+              align="center"
+              prop="deliverer_min_capacity"
+              label="最小配送量"
+            >
+            </el-table-column>
+            <el-table-column
+              align="center"
+              prop="deliverer_tool_type"
+              label="配送工具"
+            >
+            <template #default="scope">
+              {{scope.row.deliverer_tool_type==0 ? "电动车" : "摩托车"}}
+            </template>
+            </el-table-column>
+          </el-table>
+        </el-form>
+        <template #footer>
+          <span class="dialog-footer">
+            <el-button @click="assignCancel">取 消</el-button>
+            <el-button type="primary" @click="save">保 存</el-button>
+          </span>
+        </template>
+      </el-dialog>
+    </el-card>
+  </Layout>
+</template>
+<script>
+import Layout from "../layout/index.vue";
+import Pagination from "../components/Pagination/index.vue";
+import {
+  getDelivererList,
+  getList,
+  getSaveDeliverer,
+  getAddDeliverer,
+  getMarketingList
+} from "../../../service/Groupmeal/groupmeal";
+import { ElMessage } from "element-plus";
+export default {
+  name: "Distrib",
+  components: {
+    Layout,
+    Pagination
+  },
+  data() {
+    return {
+      rules: {
+        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
+        max_capacity: [
+          { required: true, message: "请填写配送上限", trigger: "blur" },
+          //   { type: "number", message: "请填写数值哦", trigger: "change" },
+        ],
+        min_capacity: [
+          { type: "number", message: "请填写数值哦", trigger: "change" },
+        ],
+      },
+      dialogFormAdd: false,
+      //   列表
+      distribList: [],
+      // 添加配送员弹框
+      addDeliverer: {
+        name: "",
+        max_capacity: "", //配送上限
+        min_capacity: "", //最小配送量
+        tool_type: [], //配送工具
+      },
+      //分配配送员弹框
+      dialogFormAssign: false,
+      deliverer: [],
+      multipleSelection: [],
+      selectActivity: "", //活动下拉框
+      total: 0,
+      page: 1,
+      pageSize: 20,
+      isEdit: false,
+      marketingList:[]
+    };
+  },
+  created() {
+    this.getList();
+    this.getDelivererList();
+    this.getMarketingList()
+  },
+  methods: {
+    selectGoodsChange(val) {
+      this.multipleSelection = val;
+    },
+    // 页码变化
+    handleCurrentChange(e) {
+      this.page = e;
+      this.getList();
+    },
+    // 清空
+    resetDate() {
+      // 添加配送员弹框
+      (this.addDeliverer = {
+        name: "",
+        max_capacity: "", //配送上限
+        min_capacity: "", //最小配送量
+        tool_type: [], //配送工具
+      }),
+      this.deliverer= [],
+      this.multipleSelection = [];
+      this.selectActivity = ""; //活动下拉框
+    },
+    // 获取主页列表
+    async getList() {
+      const {page, pageSize} = this
+      const params={
+        page,
+        pageSize
+      }
+      try {
+        const res = await getList(params);
+        this.distribList = res.response.list;
+        this.total = res.response.total;
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    //  添加配送员
+    async addSave() {
+      const { name, max_capacity, min_capacity, tool_type } = this.addDeliverer;
+      if (!name) return ElMessage("请填写配送员姓名");
+      if (!max_capacity) return ElMessage("请填写配送上限");
+      if (min_capacity !== '' && min_capacity <= 0) return ElMessage("最小配送量不能为0或小于0");
+      if (!min_capacity) return ElMessage("请填写最小配送量");
+      if (!tool_type) return ElMessage("请选择配送工具");
+      const params = {
+        name,
+        max_capacity: +max_capacity,
+        min_capacity: +min_capacity,
+        tool_type: +tool_type,
+      };
+      try {
+        const {code, reason} = await getAddDeliverer(params);
+        if(code !== 0) return this.$message.error(reason || "添加配送员失败")
+        ElMessage("添加配送员成功");
+        this.getDelivererList();
+        this.dialogFormAdd = false;
+        this.addDeliverer = {
+          name: "",
+          max_capacity: "", //配送上限
+          min_capacity: "", //最小配送量
+          tool_type: [], //配送工具
+        };
+      } catch (error) {
+        ElMessage("请求添加配送员失败");
+      }
+    },
+    // 添加的取消
+    addCancel(){
+      this.dialogFormAdd = false
+      this.resetDate()
+    },
+    //  分配配送员
+    assignDeliverer() {
+      this.dialogFormAssign = true;
+      this.getDelivererList();
+      this.multipleSelection = [];
+      this.deliverer = []
+      this.isEdit = false
+    },
+    // 修改
+    async handleModify(row) {
+      this.dialogFormAssign = true;
+      const { code } = row;
+      this.selectActivity = code;
+      console.log(code);
+      try {
+        const res = await getDelivererList({ code });
+        this.deliverer = res.response;
+        this.isEdit = true;
+        this.getList();
+        this.$nextTick(() => {
+          this.$refs.multipleTable.clearSelection();
+          this.deliverer.forEach((row) => {
+            if (row.checked) {
+              this.$refs.multipleTable.toggleRowSelection(row, true);
+            }
+          });
+        });
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    // 下载路线
+    handleDownload(url) {
+      url && window.open("http://bp-dev.ini.yidian-inc.com" + url)
+      console.log(url)
+    },
+    // 分配保存
+    async save() {
+      const { selectActivity, multipleSelection } = this;
+      const uids = multipleSelection.map((item) => item.deliverer_id);
+      if (!selectActivity) return ElMessage("请选择活动姓名");
+      try {
+        await getSaveDeliverer({ code: selectActivity, uids: uids.join(",") });
+        ElMessage("分配配送员成功");
+        this.dialogFormAssign = false;
+        this.isEdit = false;
+        this.getList();
+        this.resetDate();
+      } catch (error) {
+        ElMessage("请求分配配送员失败");
+      }
+    },
+    // 分配取消
+    assignCancel(){
+      this.dialogFormAssign = false
+      this.getDelivererList()
+      this.resetDate()
+    },
+    // 活动名称列表
+    async getMarketingList() {
+      try {
+        const res = await getMarketingList();
+        this.marketingList = res.result.map(item => {
+          return {
+            value: item.marketing_id,
+            label: item.marketing_name
+          }
+        })
+      } catch (error) {
+        console.log(error)
+      }
+    },
+    // 分配配送员列表
+    async getDelivererList() {
+      try {
+        const res = await getDelivererList();
+        // this.deliverer.code = res.response.code;
+        this.deliverer = res.response;
+        console.log(this.deliverer);
+      } catch (error) {
+        console.log(error);
+      }
+    },
+  },
+};
+</script>
+<style lang="less" src="./index.less" scope>
+</style>
\ No newline at end of file

src/router/Activity/index.js

@@ -18,6 +18,11 @@
       name: "releaseProduc",
       component: () => import(/* webpackChunkName: "activity" */ "@/pages/Activity/releaseProduc")
     },
+    {
+      path: "/op/activity/releaseProduc/spellOrderSet",
+      name: "spellOrderSet",
+      component: () => import(/* webpackChunkName: "activity" */ "@/pages/Activity/releaseProduc/components/spellOrderSet")
+    },
    
   ];