feat:批量流转,线路选项与添加

admin/src/api/admin.js

@@ -0,0 +1,16 @@
+import request from '@/utils/request'
+// 获取路线列表
+export function getProductsList() {
+    return request({
+        url: 'admin/products/list',
+        method: 'get'
+    })
+}
+
+export function addProducts(data) {
+    return request({
+        url: '/admin/products/add',
+        method: 'post',
+        data
+    })
+}

admin/src/api/order.js

@@ -7,6 +7,13 @@ export function orderBack(data) {
         data
     })
 }
+export function orderbackBatch(data) {
+    return request({
+        url: 'admin/order/backBatch',
+        method: 'post',
+        data
+    })
+}
 // 获取qa详情
 export function getQaDetail(city_id) {
     return request({

admin/src/views/admin/index.vue

@@ -1,99 +1,175 @@
 <template>
   <div class="app-container">
-
     <div class="filter-container">
-      <el-input v-model="listQuery.username" placeholder="用户名" style="width: 200px; margin-right: 10px;" class="filter-item" />
+      <el-input
-      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="getList">
+        v-model="listQuery.username"
+        placeholder="用户名"
+        style="width: 200px; margin-right: 10px"
+        class="filter-item"
+      />
+      <el-button
+        class="filter-item"
+        type="primary"
+        icon="el-icon-search"
+        @click="getList"
+      >
         搜索
       </el-button>
-      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-circle-plus" @click="handleCreate({routes:[]})">
+      <el-button
+        class="filter-item"
+        style="margin-left: 10px"
+        type="primary"
+        icon="el-icon-circle-plus"
+        @click="handleCreate({ routes: [] })"
+      >
         添加
       </el-button>
     </div>
 
-    <el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%">
+    <el-table
-
+      v-loading="listLoading"
+      :data="list"
+      border
+      fit
+      highlight-current-row
+      style="width: 100%"
+    >
       <el-table-column align="center" label="操作" width="200">
         <template slot-scope="scope">
-          <el-button type="primary" @click="handleCreate(scope.row)" size="small" icon="el-icon-edit">
+          <el-button
+            type="primary"
+            @click="handleCreate(scope.row)"
+            size="small"
+            icon="el-icon-edit"
+          >
             修改
           </el-button>
 
-          <el-button type="primary" v-if="scope.row.status" @click="onWork(scope.row)" size="small" icon="el-icon-date">
+          <el-button
+            type="primary"
+            v-if="scope.row.status"
+            @click="onWork(scope.row)"
+            size="small"
+            icon="el-icon-date"
+          >
             排班
           </el-button>
         </template>
       </el-table-column>
 
-      <el-table-column align="center" label="ID" width="80" prop="id"></el-table-column>
+      <el-table-column
+        align="center"
+        label="ID"
+        width="80"
+        prop="id"
+      ></el-table-column>
 
-      <el-table-column align="center" label="用户名" width="160" prop="username"></el-table-column>
+      <el-table-column
+        align="center"
+        label="用户名"
+        width="160"
+        prop="username"
+      ></el-table-column>
 
-      <el-table-column align="center" label="姓名" width="160" prop="name"></el-table-column>
+      <el-table-column
+        align="center"
+        label="姓名"
+        width="160"
+        prop="name"
+      ></el-table-column>
 
-      <el-table-column align="center" label="手机" width="160" prop="mobile"></el-table-column>
+      <el-table-column
+        align="center"
+        label="手机"
+        width="160"
+        prop="mobile"
+      ></el-table-column>
       <el-table-column width="138px" align="center" label="路线">
         <template slot-scope="scope">
-          <el-tag v-if="scope.row.route_type === 10" type="border-card">境内路线</el-tag>
+          <el-tag v-if="scope.row.route_type === 10" type="border-card"
-          <el-tag v-if="scope.row.route_type === 20" type="success">境外路线</el-tag>
+            >境内路线</el-tag
+          >
+          <el-tag v-if="scope.row.route_type === 20" type="success"
+            >境外路线</el-tag
+          >
         </template>
       </el-table-column>
 
-<!--      <el-table-column align="center" label="头像">
+      <!--      <el-table-column align="center" label="头像">
         <template slot-scope="scope">
           <el-avatar :size="50" :src="scope.row.avatar"></el-avatar>
         </template>
       </el-table-column>-->
 
       <el-table-column class-name="status-col" label="状态" width="180">
-        <template slot-scope="{row}">
+        <template slot-scope="{ row }">
           <el-switch
             v-model="row.status"
             @change="setStatus(row)"
             active-text="启用"
             :active-value="1"
             :inactive-value="0"
-            inactive-text="禁用">
+            inactive-text="禁用"
+          >
           </el-switch>
         </template>
       </el-table-column>
 
       <el-table-column width="180px" align="center" label="创建时间">
         <template slot-scope="scope">
-          <span>{{ scope.row.create_time | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
+          <span>{{
+            scope.row.create_time | parseTime("{y}-{m}-{d} {h}:{i}")
+          }}</span>
         </template>
       </el-table-column>
 
       <el-table-column width="180px" align="center" label="修改时间">
         <template slot-scope="scope">
-          <span>{{ scope.row.update_time | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
+          <span>{{
+            scope.row.update_time | parseTime("{y}-{m}-{d} {h}:{i}")
+          }}</span>
         </template>
       </el-table-column>
-
     </el-table>
 
     <pagination
-      v-show="total>0"
+      v-show="total > 0"
       :total="total"
       :page.sync="listQuery.page"
       :limit.sync="listQuery.limit"
       @pagination="getList"
     />
 
-
     <el-dialog title="修改管理员" :visible.sync="dialogVisible">
       <el-form label-width="120px" :model="item">
         <el-form-item label="用户名">
-          <el-input v-model="item.username" name="username" placeholder="管理员的用户名"></el-input>
+          <el-input
+            v-model="item.username"
+            name="username"
+            placeholder="管理员的用户名"
+          ></el-input>
         </el-form-item>
         <el-form-item label="姓名">
-          <el-input v-model="item.name" name="name" placeholder="管理员的姓名"></el-input>
+          <el-input
+            v-model="item.name"
+            name="name"
+            placeholder="管理员的姓名"
+          ></el-input>
         </el-form-item>
         <el-form-item label="手机">
-          <el-input v-model="item.mobile" name="name" placeholder="发送短时的时候会用到这个手机"></el-input>
+          <el-input
+            v-model="item.mobile"
+            name="name"
+            placeholder="发送短时的时候会用到这个手机"
+          ></el-input>
         </el-form-item>
         <el-form-item label="密码">
-          <el-input v-model="item.password" type="password" name="password" placeholder="管理员的新密码"></el-input>
+          <el-input
+            v-model="item.password"
+            type="password"
+            name="password"
+            placeholder="管理员的新密码"
+          ></el-input>
         </el-form-item>
         <el-form-item label="是否分配">
           <el-switch
@@ -126,19 +202,38 @@
           </el-switch>
         </el-form-item>
 
-        <el-form-item label="产品ID">
+        <!-- <el-form-item label="产品ID">
           <el-input v-model="item.product_ids" type="textarea" />
-          <span style="color: red;font-size: 11px;">多个用英文逗号隔开，例如: 384731,2328</span>
+          <span style="color: red; font-size: 11px"
-        </el-form-item>
+            >多个用英文逗号隔开，例如: 384731,2328</span
-        <!-- <el-form-item label="路线">
+          >
-          <el-checkbox-group v-model="item.routes">
-            <el-checkbox label="复选框 A">111</el-checkbox>
-            <el-checkbox label="复选框 B">2222</el-checkbox>
-            <el-checkbox label="复选框 C">3333</el-checkbox>
-            <el-checkbox label="禁用" disabled></el-checkbox>
-            <el-checkbox label="选中且禁用" disabled></el-checkbox>
-        </el-checkbox-group>
         </el-form-item> -->
+        <el-form-item label="线路">
+          <el-select
+            filterable
+            v-model="item.product_ids"
+            multiple
+            placeholder="请选择"
+          >
+            <el-option
+              v-for="item in options"
+              :key="item.id"
+              :label="item.product_name"
+              :value="item.id"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <div class="addRoutes">
+          <el-button
+            class="filter-item"
+            style="margin-left: 10px"
+            type="primary"
+            icon="el-icon-circle-plus"
+            @click="handleAddRoutes"
+            >添加线路</el-button
+          >
+        </div>
         <!-- <el-form-item label="路线">
           <el-select multiple v-model="item.routes" filterable placeholder="请选择">
             <el-option
@@ -163,13 +258,13 @@
 
     <el-dialog title="添加排班" :visible.sync="dialogWork">
       <el-form label-width="120px" :model="from">
-
         <el-form-item label="上班日期">
           <el-date-picker
-            style="margin-right: 10px;"
+            style="margin-right: 10px"
             type="dates"
             v-model="from.dates"
-            placeholder="选择一个或多个日期">
+            placeholder="选择一个或多个日期"
+          >
           </el-date-picker>
         </el-form-item>
 
@@ -186,127 +281,235 @@
         </el-form-item>
 
         <el-form-item label="渠道">
-          <el-checkbox-group v-model="from.oss" >
+          <el-checkbox-group v-model="from.oss">
-            <el-checkbox v-for="(v,i,k) in oss" :label="i" :key="k">{{v}}</el-checkbox>
+            <el-checkbox v-for="(v, i, k) in oss" :label="i" :key="k">{{
+              v
+            }}</el-checkbox>
           </el-checkbox-group>
         </el-form-item>
-
       </el-form>
 
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="onWork()">保 存</el-button>
       </div>
     </el-dialog>
-
+    <el-dialog title="添加线路" :visible.sync="isAddRouters" width="30%">
+      <el-form
+        :rules="addRoutes"
+        ref="AddRoutersForm"
+        :model="AddRoutersForm"
+        label-width="80px"
+      >
+        <el-form-item label="平台" prop="os">
+          <el-select v-model="AddRoutersForm.os" placeholder="请选择平台">
+            <el-option
+              v-for="item in platformList"
+              :label="item.os"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="线路名称" prop="product_name">
+          <el-input
+            placeholder="请输入线路名称"
+            v-model="AddRoutersForm.product_name"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="线路id" prop="third_product_id">
+          <el-input
+            placeholder="请输入线路id"
+            v-model="AddRoutersForm.third_product_id"
+          ></el-input>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="isAddRouters = false">取 消</el-button>
+        <el-button type="primary" @click="handleAddRouters">确 定</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination
-
+import { getProductsList, addProducts } from "@/api/admin";
 export default {
-  name: 'Adminlist',
+  name: "Adminlist",
   components: { Pagination },
   data() {
     return {
       list: [],
+      ids: "",
       oss: [],
-      from: {oss:[]},
+      platformList: [],
+      isAddRouters: false,
+      AddRoutersForm: {
+        third_product_id: "",
+        product_name: "",
+        os: "",
+      },
+      from: { oss: [] },
       total: 0,
       listLoading: true,
       listQuery: {
         page: 1,
-        limit: 20
+        limit: 20,
       },
       dialogVisible: false,
       dialogWork: false,
       item: {
-        btn:[]
+        btn: [],
+        product_ids: [],
       },
-      route_type: '',
+      route_type: "",
-      // options: [{
+      options: [],
-      //     value: '1',
+      addRoutes: {
-      //     label: '路线1'
+        third_product_id: [
-      //   }, {
+          { required: true, message: "请输入线路id", trigger: "blur" },
-      //     value: '2',
+        ],
-      //     label: '路线2'
+        os: [{ required: true, message: "请选择平台", trigger: "change" }],
-      //   }, {
+        product_name: [
-      //     value: '3',
+          { required: true, message: "请输入线路名称", trigger: "blur" },
-      //     label: '路线3'
+        ],
-      //   }, {
+      },
-      //     value: '4',
+    };
-      //     label: '路线4'
-      //   }, {
-      //     value: '5',
-      //     label: '路线5'
-      //   }],
-    }
   },
   created() {
-    this.getList()
+    this.getList();
   },
   methods: {
     getList() {
-      this.$axios.get('/admin/admin/index', { params: this.listQuery }).then(response => {
+      this.$axios
-        this.list = response.data.data
+        .get("/admin/admin/index", { params: this.listQuery })
-        this.total = response.data.total
+        .then((response) => {
-        this.oss = response.ext.oss
+          this.list = response.data.data;
+          this.total = response.data.total;
+          this.oss = response.ext.oss;
           // for(let k in response.ext.oss){
           //   this.oss.push({id:k,val:response.ext.oss[k]})
           // }
-        console.log(this.oss)
+          console.log(this.oss);
-        this.listLoading = false
+          this.listLoading = false;
-      }).catch(err=>{
         })
+        .catch((err) => {});
+    },
+    handleAddRoutes() {
+      this.isAddRouters = true;
+    },
+    handleAddRouters() {
+      this.$refs["AddRoutersForm"].validate(async (valid) => {
+        if (valid) {
+          let add = await addProducts(this.AddRoutersForm);
+          this.isAddRouters = false;
+          if (add.msg == "ok") {
+            this.$message({
+              message: "线路添加成功",
+              type: "success",
+              onclose: async () => {
+                let res = await getProductsList();
+                this.options = res.data.data;
+                this.platformList = res.ext.oss;
+              },
+            });
+          }
+        } else {
+          return false;
+        }
+      });
     },
     setStatus(item) {
-      console.log(item)
+      console.log(item);
-      this.$axios.post('/admin/admin/disabled',item).then(res=>{
+      this.$axios
+        .post("/admin/admin/disabled", item)
+        .then((res) => {
           this.$notify({
-              title: '成功',
+            title: "成功",
-              message: '修改成功',
+            message: "修改成功",
-              type: 'success',
+            type: "success",
-              duration: 2000
+            duration: 2000,
+          });
         })
-      }).catch(err=>{
+        .catch((err) => {
           this.$notify({
-          title: '成功',
+            title: "成功",
-          message: '修改失败',
+            message: "修改失败",
-          type: 'error',
+            type: "error",
-          duration: 2000
+            duration: 2000,
-        })
+          });
-      })
+        });
     },
-    handleCreate(item) {
+    async handleCreate(item) {
       this.dialogVisible = true;
-      this.item = item
+      let res = await getProductsList();
+      // console.log(res.data.data);
+      this.options = res.data.data;
+      this.platformList = res.ext.oss;
+      this.item = item;
+      this.item.product_ids = item.product_ids.split(",").map((item) => {
+        return Number(item);
+      });
     },
     onSave(from) {
-      this.$axios.post('/admin/admin/save', from).then(response => {
+      this.$axios
-        this.item = {}
+        .post("/admin/admin/save", {
-        this.dialogVisible = false
+          ...from,
-        this.getList()
+          product_ids: from.product_ids.join(),
-      }).catch(err=>{
         })
+        .then((response) => {
+          this.$message({
+            message: "成功",
+            type: "success",
+          });
+          this.item = {};
+          this.dialogVisible = false;
+          this.getList();
+        })
+        .catch((err) => {});
     },
     onWork(item) {
-      if(item) {
+      if (item) {
-        this.item = item
+        this.item = item;
-        this.from = {oss:[]}
+        this.from = { oss: [] };
-        this.dialogWork = true
+        this.dialogWork = true;
-        return
+        return;
       }
       this.from.admin_id = this.item.id;
-      this.$axios.post('/admin/work/saves', this.from).then(response => {
+      this.$axios
-        this.item = {}
+        .post("/admin/work/saves", this.from)
-        this.dialogWork = false
+        .then((response) => {
-      }).catch(err=>{
+          this.item = {};
-
+          this.dialogWork = false;
         })
+        .catch((err) => {});
     },
     setTime(val) {
-      console.log(val)
+      console.log(val);
-    }
+    },
-  }
+  },
-}
+};
 </script>
+<style lang="scss" scoped>
+::v-deep.el-select {
+  width: 100%;
+}
+.addRoutes {
+  display: flex;
+  justify-content: end;
+}
+// .el-input__suffix .el-input__suffix-inner {
+//   // 解决聚焦的时候会有闪现一下滚动条
+//   .el-input__icon {
+//     transform: rotateZ(0deg);
+//     // transition: transform 20s;
+//     // background: pink;
+//     &::before {
+//       display: inline-block;
+//       transition: transform 0.3s;
+//       transform: rotateZ(180deg);
+//     }
+//     &.is-reverse::before {
+//       transform: rotateZ(0deg);
+//     }
+//   }
+// }
+</style>

admin/src/views/order/index.vue

@@ -125,6 +125,15 @@
       >
         核单
       </el-button>
+      <el-button
+        type="primary"
+        :disabled="multipleSelection.length == 0"
+        class="filter-item"
+        icon="el-icon-refresh"
+        @click="onCirculationAll()"
+      >
+        批量流转
+      </el-button>
     </div>
 
     <el-table
@@ -135,7 +144,9 @@
       highlight-current-row
       style="width: 100%"
       :height="tableMaxHeight"
+      @selection-change="handleSelectionChange"
     >
+      <el-table-column type="selection" width="55"> </el-table-column>
       <el-table-column align="center" fixed width="200" label="操作">
         <template slot-scope="scope">
           <el-button-group>
@@ -462,7 +473,12 @@
               />
             </el-form-item>
 
-            <el-form-item required pros="next_follow" label="下次跟进时间" v-if="item.status !== 2">
+            <el-form-item
+              required
+              pros="next_follow"
+              label="下次跟进时间"
+              v-if="item.status !== 2"
+            >
               <el-date-picker
                 v-model="next_follow"
                 type="datetime"
@@ -492,7 +508,7 @@
           </el-select>
         </el-form-item>-->
 
-        <el-form-item required pros='desc' label="跟进说明">
+        <el-form-item required pros="desc" label="跟进说明">
           <el-input v-model="item.desc" type="textarea" />
         </el-form-item>
       </el-form>
@@ -560,10 +576,10 @@
 
     <el-dialog title="申请转出订单" :visible.sync="applyVisible">
       <el-form label-width="160px" :model="item3" :rules="rules" ref="ruleForm">
-        <el-form-item label="标题:">
+        <el-form-item label="标题:" v-if="!isAll">
           <el-input v-model="item3.product_name" disabled />
         </el-form-item>
-        <el-form-item label="订单号:">
+        <el-form-item label="订单号:" v-if="!isAll">
           <el-input v-model="item3.sn" disabled />
         </el-form-item>
         <el-form-item label="流转对象:" style="width: 600px" prop="flowObj">
@@ -612,7 +628,7 @@
 <script>
 // import Pagination from '@/Wangeditor/Pagination'
 import Pagination from "@/components/PaginationFixed";
-import { orderBack } from "@/api/order";
+import { orderBack, orderbackBatch } from "@/api/order";
 export default {
   name: "Orderlist",
   components: { Pagination },
@@ -664,7 +680,7 @@ export default {
         admin: null,
         zhubo: null,
         os_status: [],
-        appointment_status:'',
+        appointment_status: "",
       },
       item: { next_follow: "", personnel: { adult: "" } },
       follow: [],
@@ -681,8 +697,11 @@ export default {
         os: null, // 初始值，你可以根据需要设置为 1、2 或 3
       },
       os_arr: { 1: "美团", 2: "快手", 3: "抖音(甄选)", 5: "抖音（新国旅）" },
+      multipleSelection: [],
+      sn: [],
       adminList: [],
       form: {},
+      isAll: false,
       rules: {
         flowObj: [
           { required: true, message: "请选择流转对象", trigger: "change" },
@@ -727,6 +746,16 @@ export default {
     },
   },
   methods: {
+    handleSelectionChange(val) {
+      // console.log(val);
+
+      this.multipleSelection = val;
+      const data = [];
+      this.multipleSelection.map((item) => {
+        data.push(item.sn);
+      });
+      this.sn = data;
+    },
     setQuery(key) {
       if (this.$route.query.hasOwnProperty(key)) {
         this.listQuery[key] = this.$route.query[key];
@@ -812,6 +841,7 @@ export default {
     onCirculation(item) {
       this.getAdminList(item.category_desc);
       this.applyVisible = true;
+      this.isAll = false;
       this.item3 = { ...item, os: Number(item.os) };
       console.log(this.item3);
       if (this.item3.backs && this.item3.backs.admin_id) {
@@ -820,18 +850,40 @@ export default {
         this.resetForm("ruleForm");
       }
     },
+    // 批量设置
+    onCirculationAll() {
+      this.applyVisible = true;
+      this.isAll = true;
+    },
     //确定
     onCirculationSave(to_admin_id) {
-      this.$refs.ruleForm.validate((valid) => {
+      this.$refs.ruleForm.validate(async (valid) => {
         if (valid) {
-          orderBack({
+          // orderBack({
+          //   sn: this.item3.sn,
+          //   os: this.item3.os,
+          //   to_admin_id: to_admin_id,
+          // }).then((res) => {
+          //   this.applyVisible = false;
+          //   this.isAll = false;
+          //   this.getList();
+          // });
+          let res = this.isAll
+            ? await orderbackBatch({ sn: this.sn, to_admin_id: to_admin_id })
+            : orderBack({
                 sn: this.item3.sn,
                 os: this.item3.os,
                 to_admin_id: to_admin_id,
-          }).then((res) => {
-            this.applyVisible = false;
-            this.getList();
               });
+          if (res.data) {
+            this.$message({
+              message: "成功",
+              type: "success",
+            });
+            this.applyVisible = false;
+            this.isAll = false;
+            this.getList();
+          }
         } else {
           return false;
         }
@@ -845,6 +897,7 @@ export default {
             .post("/admin/order/backcancel", { id: this.item3.id })
             .then((res) => {
               this.applyVisible = false;
+              this.isAll = false;
               this.getList();
             })
             .catch((err) => {
@@ -882,7 +935,7 @@ export default {
           this.dialogVisible = false;
           this.item = { next_follow: "", personnel: { adult: "" } };
           this.$router.push({
-            path: "/order/index"
+            path: "/order/index",
           });
         })
         .catch((err) => {});

admin/vue.config.js

@@ -38,8 +38,8 @@ module.exports = {
     },
     proxy: {
       '/dev-api': { // 接口地址 以 api开头的都走下面的配置
-        target: 'https://www.szjinao.cn', // 代理目标地址为后端服务器地址 127.0.0.1 192.168.1.2
+        // target: 'https://www.szjinao.cn', // 代理目标地址为后端服务器地址 127.0.0.1 192.168.1.2
-        // target: 'http://192.168.0.100:8787', // 代理目标地址为后端服务器地址 127.0.0.1 192.168.1.2
+        target: 'http://192.168.0.100:8787', // 代理目标地址为后端服务器地址 127.0.0.1 192.168.1.2
         ws: true, // 是否支持 websocket 请求 支持
         changeOrigin: true, // 是否启用跨域
         pathRewrite: {