拜访计划开发。

src/api/business/spd/task_management/visitingPlan/visitingPlan.js

@@ -0,0 +1,55 @@
+import request from '@/utils/request'
+
+//拜访计划列表
+export function getPlanList(data) {
+    return request({
+        url: '/mk/bo/plan/list',
+        method: 'get',
+        params: data
+    })
+}
+//拜访计划新增
+export function addPlan(data) {
+    return request({
+        url: '/mk/bo/plan/',
+        method: 'post',
+        data: data
+    })
+}
+//拜访计划编辑
+export function editPlan(data) {
+    return request({
+        url: '/mk/bo/plan/',
+        method: 'put',
+        data: data
+    })
+}
+//拜访计划提交
+export function submitPlan(data) {
+    return request({
+      url: `/mk/bo/plan/submit`,
+      method: 'POST',
+      data: data
+    })
+}
+//拜访计划基本信息详情
+export function getPlanDetail(id) {
+    return request({
+      url: '/mk/bo/plan/' + id,
+      method: 'get',
+    })
+}
+//拜访计划基本子表详情
+export function getPlanSonDetail(planId) {
+    return request({
+      url: `/mk/bo/item/` + planId,
+      method: 'get',
+    })
+}
+//拜访计划删除
+export function delPlan(id) {
+    return request({
+        url: '/mk/bo/plan/' + id,
+        method: 'delete'
+    })
+}

src/views/business/spd/task_management/visitingPlan/add.vue

@@ -0,0 +1,596 @@
+<template>
+  <div id="addPlanList">
+    <el-card>
+      <span>基本信息</span>
+      <el-form :model="basicForm" :rules="basicRules" ref="basic" label-width="auto">
+        <el-row :gutter="10">
+          <el-col :span="1.5">
+              <el-form-item label="计划编码">
+                <el-input
+                  v-model="basicForm.planCode"
+                  size="mini"
+                  disabled
+                  style="width: 200px"
+                />
+              </el-form-item>
+          </el-col>
+
+          <el-col :span="1.5">
+            <el-form-item label="计划名称" prop="planName" :rules="{ required: true, message: '请填写名称', trigger: 'blur' }">
+              <el-input
+                v-model.trim="basicForm.planName"
+                size="mini"
+                :disabled="sonDisable"
+                clearable
+                style="width: 200px"
+              />
+            </el-form-item>
+         </el-col>
+
+         <el-col :span="1.5">
+            <el-form-item label="执行人" prop="chargerName">
+                <el-select clearable size="mini" v-model="basicForm.chargerName" :disabled="sonDisable" @focus="choose('CONTACTS_PARAM', true, '执行人')" style="width: 200px">
+                  <el-option v-for="item in personOptions" :key="item.id" :label="item.name" :value="item.code" />
+                </el-select>
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="1.5">
+            <el-form-item label="开始时间" prop="startDate" :rules="{ required: true, message: '请选择开始时间', trigger: 'blur' }">
+              <el-date-picker
+                v-model="basicForm.startDate"
+                :disabled="sonDisable"
+                clearable
+                type="date"
+                value-format="yyyy-MM-dd"
+                @change="changePlanDate"
+                size="mini"
+                style="width: 200px"
+              >
+              </el-date-picker>
+            </el-form-item>
+         </el-col>
+
+         <el-col :span="1.5">
+            <el-form-item label="截止时间" prop="deadlineTime" :rules="{ required: true, message: '请选择截止时间', trigger: 'blur' }">
+              <el-date-picker
+                v-model="basicForm.deadlineTime"
+                :disabled="sonDisable"
+                clearable
+                type="date"
+                value-format="yyyy-MM-dd"
+                @change="changePlanDate"
+                size="mini"
+                style="width: 200px"
+              >
+              </el-date-picker>
+            </el-form-item>
+         </el-col>
+
+         <el-col :span="1.5">
+            <el-form-item label="销售区域" prop="marketingAreaName">
+              <el-select clearable v-model="basicForm.marketingAreaName" size="mini" :disabled="sonDisable" @focus="choose('DEPT_PARAM', true, '销售区域')" style="width: 200px">
+                <el-option
+                  v-for="item in deptOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.code">
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="1.5">
+            <el-form-item label="部门" prop="deptName">
+              <el-select clearable v-model="basicForm.deptName" size="mini" :disabled="sonDisable" @focus="choose('DEPT_PARAM', true, '部门')" style="width: 200px">
+                <el-option
+                  v-for="item in deptOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.code">
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="1.5">
+            <el-form-item label="确认状态" prop="state">
+              <el-select disabled v-model="basicForm.state" size="mini" style="width: 200px">
+                <el-option v-for="dict in dict.type.mk_plan_state" :key="dict.value" :label="dict.label" :value="dict.value">
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <span>明细信息</span>
+        <div class="btn_grooup">
+          <el-button type="primary" size="mini" @click="addLine" v-if="!sonDisable">增行</el-button>
+        </div>
+
+        <el-table 
+          :data="basicForm.mkBoPlanItemList" 
+          fit
+          max-height="300"
+          style="font-size: 12px;"
+          @selection-change="handleSelectionChange"
+          :cell-class-name="cellClassName"
+        >
+        <el-table-column show-overflow-tooltip type="selection"/>
+        <el-table-column show-overflow-tooltip label="序号" type="index" align="center"/>
+        <el-table-column show-overflow-tooltip label="计划编号" prop="planCode" width="150"/>
+        <el-table-column show-overflow-tooltip label="日期"  prop="date" width="230px">
+          <template slot-scope="scope">
+            <el-form-item class="hang" :prop="'mkBoPlanItemList.' + scope.$index + '.' + 'date'" :rules="{ required: true, message: '请填写日期', trigger: 'blur' }">
+              <el-date-picker
+                v-model="scope.row.date"
+                :readonly="sonDisable"
+                clearable
+                type="date"
+                size="mini"
+                value-format="yyyy-MM-dd"
+                placeholder="选择日期">
+              </el-date-picker>
+            </el-form-item>
+          </template>
+        </el-table-column>
+
+        <el-table-column show-overflow-tooltip label="客户名称" prop="customerName" min-width="230">
+          <template slot-scope="scope">
+            <el-form-item class="hang">
+              <el-select clearable size="mini" v-model="scope.row.customerName" :disabled="sonDisable" @focus="chooseSon(scope.$index, 'CUSTOMER_PARAM_ZT', true, '客户')" style="width: 200px">
+                <el-option v-for="item in customerOptions" :key="item.id" :label="item.name" :value="item.code" />
+              </el-select>
+            </el-form-item>
+          </template>
+        </el-table-column>
+
+        <el-table-column show-overflow-tooltip label="联系人" prop="contactName" min-width="230">
+          <template slot-scope="scope">
+            <el-form-item class="hang">
+              <el-select clearable size="mini" v-model="scope.row.contactName" :disabled="sonDisable" @focus="chooseSon(scope.$index, 'LINKMAN_PARAM', true, '联系人', {})" style="width: 200px">
+                <el-option v-for="item in linkOptions" :key="item.id" :label="item.name" :value="item.code" />
+              </el-select>
+            </el-form-item>
+          </template>
+        </el-table-column>
+
+        <el-table-column show-overflow-tooltip label="详细地址" prop="address" min-width="200">
+          <template slot-scope="scope">
+            <el-form-item class="hang">
+              <el-input clearable :readonly="sonDisable" size="mini" v-model="scope.row.address"/>
+            </el-form-item>
+          </template>
+        </el-table-column>
+
+        <el-table-column show-overflow-tooltip label="拜访目的" prop="purpose" min-width="200">
+          <template slot-scope="scope">
+            <el-form-item class="hang">
+              <el-select clearable v-model="scope.row.purpose" size="mini">
+                <el-option v-for=" dict in dict.type.mk_bo_behavior_goal" :key="dict.value" :label="dict.label" :value="dict.value">
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </template>
+        </el-table-column>
+
+        <el-table-column show-overflow-tooltip label="商机" prop="boName" min-width="200"/>
+        <el-table-column show-overflow-tooltip label="营销活动" prop="marketingCampaign" min-width="200">
+          <template slot-scope="scope">
+            <el-form-item class="hang">
+              <el-input clearable :readonly="sonDisable" size="mini" v-model="scope.row.marketingCampaign"/>
+            </el-form-item>
+          </template>
+        </el-table-column>
+
+        <el-table-column
+            fixed="right"
+            label="操作"
+            align="center"
+            >
+          <template slot-scope="scope">
+            <el-button type="text" size="mini" :disabled="sonDisable" @click="delLine(scope.$index, scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+        </el-table>
+      </el-form>
+    </el-card>
+
+    <div class="btn_group">
+      <el-col :span="1.5">
+        <el-button type="primary" size="mini" plain @click="save" v-if="sonPageStu == 'add' || sonPageStu == 'edit'">保存</el-button>
+      </el-col>
+      <el-col :span="1.5" style="margin: 0 10px;">
+        <el-button type="primary" size="mini" plain @click="submit" v-if="sonPageStu == 'check' && (row.status == '0' || row.status == '3')">提交</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button size="mini" plain @click="back">返回</el-button>
+      </el-col>
+
+      <Refers ref="refer" @doSubmit="selectionsToInput" :single="true"/>
+
+      <!-- <popDialog ref="materialRefer" @doSubmit="selectMaterial" :single="true" /> -->
+
+    </div>
+  </div>
+</template>
+
+<script>
+import {addPlan, getPlanDetail, editPlan} from '@/api/business/spd/task_management/visitingPlan/visitingPlan.js'
+import Refers from '@/components/Refers/refers.vue'
+// 用于回显参照框数据
+import {getRefer} from '@/api/purchase/basic.js'
+// 明细行选择物料参照
+import popDialog from '@/components/PopDialog/index.vue'
+export default {
+  name: 'addPlanList',
+  props: ['pageStu','row', 'disable'],
+  dicts: ['mk_plan_state', 'mk_bo_behavior_goal'],
+  components: {
+    Refers,
+    popDialog
+  },
+  model: {
+    prop: 'isList',
+    event: 'jugislist'
+  },
+  data() {
+    return {
+      // 不能直接改变props传来的值
+      sonPageStu: this.pageStu,
+      sonDisable: this.disable,
+      dialog: {
+        config: false
+      },
+      basicForm: {
+        id: '',
+        planId: '',
+        planCode: '',
+        planName :'',
+        charger: '',
+        chargerName: '',
+        dept: '',
+        deptName: '',
+        startDate: '',
+        deadlineTime: '',
+        date: '',
+        marketingArea: '',
+        marketingAreaName: '',
+        state: '0',
+        customer: '',
+        customerName: '',
+        contact: '',
+        contactName: '',
+        address: '',
+        purpose: '',
+        bo: '',
+        boName: '',
+        marketingCampaign: '',
+        mkBoPlanItemList: []
+      },
+      delDemandItemList: [],
+      options: [{
+        value: 'Y', label: '是',
+      }, {
+        value: 'N', label: '否'
+      }],
+      basicRules: {},
+      tableList: [],
+      referCondition: {
+        type: '',
+        isPage: true,
+        title: '',
+      },
+      // referCondition: {
+      //   type: '',
+      //   isPage: true,
+      //   title: '',
+      // },
+      tableIndex: null,
+      ids: [],
+      linkOptions: [],
+      manOptions: [],
+      personOptions: [],
+      deptOptions: [],
+      customerOptions: [],
+      pickerOptionsEnd: {
+        disabledDate: (time) => {
+          return time.getTime() < Date.now() - 1 * 24 * 60 * 60 * 1000
+        }
+      },
+      isBDXQ: false,
+      isYl: false,
+    }
+  },
+  updated() {},
+  mounted() {},
+  created() {
+    if(this.pageStu == 'check') {
+      console.log('数据', this.row)
+      this.getDetails(this.row)
+    } else if(this.pageStu == 'edit') {
+      this.getDetails(this.row)
+    }
+  },
+  methods:{
+    // 改变单据日期时清空子表的日期
+    changePlanDate() {
+      this.basicForm.mkBoPlanItemList.forEach(item => {
+        item.deliveryDate = null
+      })
+    },
+    // 清空
+    cleanYLSL(scope) {
+      scope.row.reservedQty = ''
+      scope.row.reservedPeriod = ''
+    },
+    handleData() {
+      console.log('222')
+      // 复制新增把id,编码,创建人置为空,子表去掉id
+      this.basicForm.id = ''
+      this.basicForm.code = ''
+      this.basicForm.createBy = ''
+      this.basicForm.source = '4'
+      if (this.basicForm.mkBoPlanItemList.length !== 0) {
+        this.basicForm.mkBoPlanItemList.forEach(item => {
+          if (item.id) {
+            delete item.id
+          }
+          if (item.demandId) {
+            delete item.demandId
+          }
+          if (item.allotCode) {
+            delete item.allotCode
+          }
+        })
+      }
+    },
+    // 如果需要回显则调用详情接口
+    getDetails(row) {
+      getPlanDetail(row.id).then(res => {
+        if (res.code === 200) {
+          // console.log('res', res)
+          this.basicForm = res.data
+          for (let i = 0; i < this.basicForm.mkBoPlanItemList.length; i++) {
+            this.basicForm.mkBoPlanItemList[i].planCode = res.data.planCode
+          }
+          // console.log('this.basicForm.mkBoPlanItemList.planCode', this.basicForm.mkBoPlanItemList.planCode)
+        }
+      })
+    },
+    // getDetails(row) {
+    //   getPlanDetail(row.id).then(res => {
+    //     if (res.code === 200) {
+    //       // this.basicForm = res.data
+    //       console.log('res', res)
+    //       let reciveForm = res.data
+    //       let params = {...{id: row.id}, ...{pageNum:1, pageSize: 10}}
+    //       getPlanSonDetail(params.id).then(res => {
+    //         if (res.code === 200) {
+    //         reciveForm.mkBoPlanItemList = res.data
+    //         console.log('reciveForm',reciveForm)
+    //         this.basicForm = reciveForm
+    //         }
+    //       })
+    //     }
+    //   })
+    // },
+
+    async save() {
+      if(this.basicForm.mkBoPlanItemList.length !== 0) {
+        this.$refs['basic'].validate((valid) => {
+          if(valid) {
+            this.$modal.loading("保存中...");
+            if(this.sonPageStu == 'add') {
+              this.handleData()
+              addPlan(this.basicForm).then(res => {
+                console.log(333)
+                if (res.code === 200) {
+                  this.$modal.msgSuccess("保存成功");
+                  this.$modal.closeLoading();
+                  this.back()
+                }
+              }).catch(err => {
+                this.$modal.closeLoading();
+              })
+            } else if (this.sonPageStu == 'edit') {
+              let list = []
+              list.push(...this.basicForm.mkBoPlanItemList, ...this.delDemandItemList)
+              // 深拷贝一下参数对象
+              let param = JSON.parse(JSON.stringify(this.basicForm))
+              console.log('深拷贝对象',param);
+              param.mkBoPlanItemList = list
+              // this.basicForm.mkBoPlanItemList.push(...this.delDemandItemList)
+              editPlan(param).then(res => {
+                if (res.code === 200) {
+                  this.$modal.msgSuccess("编辑成功");
+                  this.$modal.closeLoading();
+                  this.back()
+                }
+              }).catch(err => {
+                this.$modal.closeLoading();
+              })
+            }
+          }
+        })
+      } else {
+        this.$modal.msgWarning("明细信息不能为空！");
+      }
+    },
+    submit() {
+      this.$modal.loading("提交中...");
+      submitDemand(this.basicForm).then(res => {
+        if (res.code === 200) {
+          this.$modal.msgSuccess("提交成功");
+          this.$modal.closeLoading();
+          this.back()
+        }
+      }).catch(err => {
+        this.$modal.closeLoading();
+      })
+    },
+    // 增行
+    addLine() {
+      const newLine = {
+        contacts: null,
+        id: null,
+        planId: null,
+        planCode: null,
+        date: null,
+        customer: null,
+        customerName: null,
+        contact: null,
+        contactName: null,
+        address: null,
+        purpose: null,
+        bo: null,
+        boName: null,
+        marketingCampaign: null,
+        tenantId: null,
+        revision: null,
+        createBy: null,
+        createByName: null,
+        createTime: null,
+        updateBy: null,
+        updateByName: null,
+        updateTime: null,
+        delFlag: 0,
+        // 新增字段
+        model: null,
+        storageCondition: null,
+        transportationCondition: null,
+      }
+      this.basicForm.mkBoPlanItemList.push(newLine)
+    },
+    delLine(index, row) {
+      console.log('删除行:', index)
+      console.log('改变行:', row)
+      // this.basicForm.mkBoPlanItemList = this.basicForm.mkBoPlanItemList.filter(item => {
+      //   return item.id !== row.id
+      // })
+      row.delFlag = '2'
+      // this.basicForm.mkBoPlanItemList.splice(index,1)
+      let delList = []
+      delList = this.basicForm.mkBoPlanItemList.filter(item => {
+        return item.delFlag == '2'
+      })
+      this.basicForm.mkBoPlanItemList = this.basicForm.mkBoPlanItemList.filter(item => {
+        return item.delFlag == '0'
+      })
+      this.delDemandItemList.push(...delList)
+      console.log('删除的数组',this.delDemandItemList)
+    },
+
+    back() {
+      this.$emit('jugislist', true)
+      // let queryParams = {
+      //   pageNum: 1,
+      //   pageSize: 10
+      // }
+      this.$emit('refresh')
+    },
+    // 单元格标红
+    cellClassName({row, column, rowIndex, columnIndex}) {
+      if(this.basicForm.isSpeical == 'N' && column.label == '需求可用周期' && Number(row.demandPeriod) > 1.5 && Number(row.demandPeriod) > Number(row.minOrderQty)) {
+        return 'success-row';
+      }
+    },
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item =>{
+        return item.id
+      })
+      console.log('选中数组', this.ids)
+    },
+    // 回显参照框
+    reBackRefer(type, id, title) {
+      getRefer({type: type, id: id}).then(res => {
+        if(type == 'LINKMAN_PARAM') {
+          this.linkOptions = res.rows
+        }
+        if (type == 'CUSTOMER_PARAM_ZT') {
+          this.customerOptions = res.rows
+        }
+        if (type == 'CONTACTS_PARAM') {
+          this.personOptions = res.rows
+        }
+        if (type == 'DEPT_PARAM') {
+          this.deptOptions = res.rows
+        }
+      })
+    },
+    // 基本信息选择参照带出数据
+    choose(type, isPage, title) {
+      this.referCondition.type = type
+      this.referCondition.isPage = isPage
+      this.referCondition.title = title
+      this.$refs.refer.init(this.referCondition)
+    },
+    // 明细行选择参照带出数据
+    chooseSon(index, type, isPage, title, parame) {
+      this.tableIndex = index
+      this.referCondition.type = type
+      this.referCondition.isPage = isPage
+      this.referCondition.title = title
+      this.referCondition.parame = parame
+      this.$refs.refer.init(this.referCondition)
+    },
+    selectionsToInput(selection) {
+      if(this.referCondition.type == 'CUSTOMER_PARAM_ZT') {
+        this.customerOptions = selection
+        this.basicForm.mkBoPlanItemList[this.tableIndex].customer = selection[0].id
+        this.basicForm.mkBoPlanItemList[this.tableIndex].customerName = selection[0].name
+      }
+      if(this.referCondition.type == 'CONTACTS_PARAM') {
+        this.personOptions = selection
+        this.basicForm.charger = selection[0].id
+        this.basicForm.chargerName = selection[0].name
+      }
+      if(this.referCondition.type == 'DEPT_PARAM') {
+        this.deptOptions = selection
+        this.basicForm.dept = selection[0].id
+        this.basicForm.deptName = selection[0].name
+      }
+      if(this.referCondition.type == 'LINKMAN_PARAM') {
+        this.linkOptions = selection
+        this.basicForm.mkBoPlanItemList[this.tableIndex].contact = selection[0].id
+        this.basicForm.mkBoPlanItemList[this.tableIndex].contactName = selection[0].name
+      }
+    },
+    // tableRowClassName({ row, rowIndex }) {
+    //   row.index = rowIndex;
+    // },
+    // rowClick(row){
+    //   this.tableIndex = row.index;
+    //   console.log("row.index",row.index);
+    // }
+  }
+}
+
+</script>
+
+<style lang="scss" scoped>
+.btn_group {
+  width: 100%;
+  margin: 20px 0;
+  display: flex;
+  justify-content: center;
+} 
+.btn_grooup {
+  margin-bottom: 10px;
+  display: flex;
+  justify-content: flex-end;
+}
+.hang {
+  margin: auto;
+}
+.hang ::v-deep .el-form-item__content{
+  margin-left: 0px !important;
+}
+.el-table ::v-deep .el-form-item__error{
+  padding-top: 0;
+  top: 70%
+}
+.el-table ::v-deep .success-row {
+  background: #f11616;
+}
+</style>

src/views/business/spd/task_management/visitingPlan/index.vue

@@ -0,0 +1,658 @@
+<template>
+  <div id="PlanList">
+    <div v-if="isList">
+      <el-card>
+        <el-form class="search_area" label-width="100px">
+          <el-row :gutter="10">
+            <el-col :span="1.5">
+              <el-form-item label="计划编码">
+                <el-input
+                  v-model.trim="queryParams.planCode"
+                  size="mini"
+                  clearable
+                  style="width: 200px"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="1.5">
+              <el-form-item label="计划名称">
+                <el-input
+                  v-model.trim="queryParams.planName"
+                  size="mini"
+                  clearable
+                  style="width: 200px"
+                />
+              </el-form-item>
+            </el-col>
+            <!-- <el-col :span="1.5">
+              <el-form-item label="线路类型">
+                <el-select clearable size="mini" v-model="queryParams.type" @focus="chooseOrg('CONTACTS_PARAM', true, '线路类型')" style="width: 200px">
+                  <el-option v-for="item in typeOptions" :key="item.id" :label="item.name" :value="item.code" />
+                </el-select>
+              </el-form-item>
+            </el-col> -->
+            <el-col :span="1.5">
+              <el-form-item label="执行人">
+              <el-select clearable size="mini" v-model="queryParams.chargerName" @focus="chooseOrg('CONTACTS_PARAM', true, '执行人')" style="width: 200px">
+                <el-option v-for="item in personOptions" :key="item.id" :label="item.name" :value="item.code" />
+              </el-select>
+              </el-form-item>
+            </el-col>
+                            
+            <el-col :span="1.5">
+              <el-form-item label="确认状态">
+                <el-select clearable v-model="queryParams.state" size="mini" style="width: 200px">
+                  <el-option v-for=" dict in dict.type.mk_plan_state" :key="dict.value" :label="dict.label" :value="dict.value">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="1.5">
+              <el-form-item label="" label-width="20px">
+              <el-button type="primary" size="mini" icon="el-icon-search" plain @click="searchList">搜索</el-button>
+              <el-button size="mini" icon="el-icon-refresh" plain @click="resetList">重置</el-button>
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <CollapseTransition>
+            <div v-show="expanded">
+              <el-row :gutter="10">
+                <el-col :span="1.5">
+                  <el-form-item label="开始时间">
+                    <el-date-picker
+                    v-model="queryParams.startDate"
+                    type="date"
+                    clearable
+                    value-format="yyyy-MM-dd"
+                    size="mini"
+                    style="width: 200px"
+                    >
+                    </el-date-picker>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="1.5">
+                  <el-form-item label="截止时间">
+                    <el-date-picker
+                    v-model="queryParams.deadlineTime"
+                    type="date"
+                    clearable
+                    value-format="yyyy-MM-dd"
+                    size="mini"
+                    style="width: 200px"
+                    >
+                    </el-date-picker>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="1.5">
+                  <el-form-item label="销售区域">
+                    <el-select clearable v-model="queryParams.marketingAreaName" size="mini" @focus="chooseOrg('DEPT_PARAM', true, '销售区域')" style="width: 200px">
+                      <el-option
+                        v-for="item in deptOptions"
+                        :key="item.id"
+                        :label="item.name"
+                        :value="item.id">
+                      </el-option>
+                    </el-select>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="1.5">
+                  <el-form-item label="部门">
+                    <el-select clearable v-model="queryParams.deptName" size="mini" @focus="chooseOrg('DEPT_PARAM', true, '部门')" style="width: 200px">
+                      <el-option
+                        v-for="item in deptOptions"
+                        :key="item.id"
+                        :label="item.name"
+                        :value="item.id">
+                      </el-option>
+                    </el-select>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </div>
+          </CollapseTransition>
+        </el-form>
+
+        <el-divider class="lines"><i style="cursor: pointer;" :class="expanded?'el-icon-arrow-up':'el-icon-arrow-down'" @click="drop"></i></el-divider>
+  
+        <div class="btn_grooup">
+          <el-button type="primary" size="mini" @click="addDivision">新增</el-button>
+
+          <!-- <el-dropdown size="mini" @command="handleCommand">
+            <el-button size="mini" type="primary" style="margin-left: 10px;">
+            导入<i class="el-icon-arrow-down el-icon--right"></i>
+            </el-button>
+            <el-dropdown-menu slot="dropdown">
+            <el-dropdown-item command="数据导入">数据导入</el-dropdown-item>
+            <el-dropdown-item command="模板下载">模板下载</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+
+          <el-dropdown size="mini" @command="handleExport">
+            <el-button size="mini" type="primary" style="margin: 0 10px;">
+            导出<i class="el-icon-arrow-down el-icon--right"></i>
+            </el-button>
+            <el-dropdown-menu slot="dropdown">
+            <el-dropdown-item command="选中导出">选中导出</el-dropdown-item>
+            <el-dropdown-item command="全部导出">全部导出</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown> -->
+
+          <el-button type="primary" size="mini" @click="delItems">删除</el-button>
+          <!-- <el-button type="primary" size="mini">打印</el-button> -->
+        </div>
+
+        <el-table 
+        :data="tableList" 
+        fit
+        max-height="550"
+        style="font-size: 12px;"
+        @selection-change="handleSelectionChange"
+        >
+          <el-table-column show-overflow-tooltip type="selection" width="55" />
+          <el-table-column show-overflow-tooltip label="计划编码" align="center" min-width="200" prop="planCode"/>
+          <el-table-column show-overflow-tooltip label="计划名称" align="center" min-width="150" prop="planName"/>
+          <el-table-column show-overflow-tooltip label="执行人" align="center" min-width="150" prop="chargerName"/>
+          <el-table-column show-overflow-tooltip label="部门" align="center" min-width="150" prop="deptName"/>
+          <el-table-column show-overflow-tooltip label="开始时间" align="center" min-width="120" prop="startDate" />
+          <el-table-column show-overflow-tooltip label="截止时间" align="center" min-width="120" prop="deadlineTime" />
+          <el-table-column show-overflow-tooltip label="单据状态" align="center" min-width="120" prop="state" :formatter="formatterStatus"/>
+          <el-table-column
+          fixed="right"
+          label="操作"
+          align="center"
+          width="180"
+          >
+            <template slot-scope="scope">
+              <el-button type="text" size="mini" @click="check(scope.row)">查看</el-button>
+              <el-button type="text" size="mini" v-if="scope.row.state == '0'" @click="edit(scope.row)">编辑</el-button>
+              <el-button type="text" size="mini" v-if="scope.row.state == '0'" @click="commit(scope.row)">提交</el-button>
+              <el-button type="text" size="mini" @click="deleteids(scope.row)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <el-pagination
+        background
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="queryParams.pageNum"
+        :page-sizes="[10, 15, 20]"
+        :page-size="100"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total=total>
+        </el-pagination>
+      </el-card>
+    </div>
+
+    <!-- 用户导入对话框 -->
+    <el-dialog title="数据导入" :visible.sync="upload.open" width="400px">
+      <el-upload
+      ref="upload"
+      :limit="1"
+      accept=".xlsx, .xls"
+      :headers="upload.headers"
+      :action="upload.url + '?updateSupport=' + upload.updateSupport"
+      :disabled="upload.isUploading"
+      :on-progress="handleFileUploadProgress"
+      :on-success="handleFileSuccess"
+      :on-error="errorFile"
+      :auto-upload="false"
+      drag
+      >
+        <i class="el-icon-upload"></i>
+        <div class="el-upload__text">
+          将文件拖到此处，或
+          <em>点击上传</em>
+        </div>
+        <!-- <div class="el-upload__tip" slot="tip">
+          <el-checkbox v-model="upload.updateSupport" />是否更新已经存在的用户数据
+        </div> -->
+        <div class="el-upload__tip" style="color:red" slot="tip">提示：仅允许导入“xls”或“xlsx”格式文件！</div>
+      </el-upload>
+      <div slot="footer" class="dialog-footer">
+        <el-button size="mini" type="primary" @click="submitFileForm">确 定</el-button>
+        <el-button size="mini" @click="upload.open = false">取 消</el-button>
+      </div>
+    </el-dialog>
+
+    <!-- 模板下载新增参数 -->
+    <el-dialog title="需求模板下载" :visible.sync="download.open" @close="clearDownload" width="400px">
+
+    <el-row style="margin-bottom: 20px;">
+      <span style="margin-right: 10px;">需求客户</span>
+      <el-select clearable size="mini" v-model="download.customer" @clear="download.customer = ''" @focus="chooseOrg('CUSTOMER_PARAM', true, '选择客户')">
+       <el-option v-for="item in mBcustomer" :key="item.id" :label="item.name" :value="item.code" />
+      </el-select>
+    </el-row>
+
+    <!-- <el-row style="margin-bottom: 20px;">
+      <span style="margin-right: 10px;">供应仓库</span>
+      <el-select clearable size="mini" v-model="download.warehouse" @clear="cleanMb" @focus="chooseOrg('WAREHOUSE_PARAM', true, '选择仓库')">
+        <el-option v-for="item in mBwarehouse" :key="item.id" :label="item.name" :value="item.code" />
+      </el-select>
+    </el-row> -->
+
+    <el-row style="margin-bottom: 20px;">
+      <span style="margin-right: 10px;">供应货位</span>
+      <el-select clearable size="mini" v-model="download.cargoSpace" @clear="download.cargoSpace = ''" @focus="mbHuowei('ALLOCATION_PARAM', true, '选择货位', download.warehouseId)">
+        <el-option v-for="item in mBcargoSpace" :key="item.id" :label="item.name" :value="item.code" />
+      </el-select>
+    </el-row>
+
+    <el-row style="margin-bottom: 20px;">
+      <span style="margin-right: 10px;">品类选择</span>
+      <el-select
+      v-model="download.category"
+      size="mini"
+      clearable
+      @focus="chooseTreeRefer('MATERIALCLASSIFY_PARAM', false, '选择品类')"
+      >
+       <el-option v-for="item in classOptions" :key="item.id" :label="item.name" :value="item.code" />
+      </el-select>
+    </el-row>
+
+    <div slot="footer" class="dialog-footer">
+      <el-button size="mini" type="primary" @click="mbDownload">模板下载</el-button>
+      <el-button size="mini" @click="download.open = false">取 消</el-button>
+    </div>
+    </el-dialog>
+
+    <Add v-model="isList" v-if="!isList" :pageStu="page" :disable="disable" :row="rowDetail" @refresh="searchList"/>
+
+    <Refers ref="refer" @doSubmit="selectionsToInput" :single="true"/>
+
+    <TreeRefers ref="tree" @doSubmit="selectionsToInput2" :single="true"/>
+  </div>
+</template>
+
+<script>
+// 导入的token
+import { getToken } from "@/utils/auth";
+import Add from './add.vue'
+import Refers from '@/components/Refers/refers.vue'
+import TreeRefers from '@/components/Refers/treeRefer.vue'
+import CollapseTransition from '@/components/MyCollapse/collapse.vue'
+import {getPlanList, delPlan, downLoadDemand, exportDemand, submitPlan } from '@/api/business/spd/task_management/visitingPlan/visitingPlan.js'
+export default {
+  name: 'PlanLise',
+  components: {
+    Add,
+    CollapseTransition,
+    Refers,
+    TreeRefers
+  },
+  dicts: ['mk_plan_state'],
+  data() {
+    return {
+      // 导入参数
+      upload: {
+        // 是否显示弹出层（导入）
+        open: false,
+        // 弹出层标题（导入）
+        title: "数据导入",
+        // 是否禁用上传
+        isUploading: false,
+        // 是否更新已经存在的用户数据
+        updateSupport: 1,
+        // 设置上传的请求头部
+        headers: { Authorization: "Bearer " + getToken() },
+        // 上传的地址
+        url: process.env.VUE_APP_BASE_API + "/pu/demand/import"
+      },
+      // 模板下载参数
+      download: {
+        open: false,
+        customer: '',
+        warehouse: '',
+        warehouseId: '',
+        cargoSpace: '',
+        category: ''
+      },
+      mBcustomer: [],
+      mBwarehouse: [],
+      mBcargoSpace: [],
+      classOptions: [],
+      // 下拉收起配置
+      expanded: false,
+      // 页面配置
+      isList: true,
+      // 页面状态
+      page: '',
+      queryParams: {
+        planCode: '',
+        planName: '',
+        charger: '',
+        chargerName: '',
+        dept: '',
+        deptName: '',
+        startDate: '',
+        deadlineTime: '',
+        type: '',
+        state: '',
+        marketingArea: '',
+        marketingAreaName: '',
+        pageNum: 1,
+        pageSize: 10
+      },
+      referCondition: {
+        type: '',
+        isPage: true,
+        title: ''
+      },
+      options: [{
+        value: 'Y', label: '是',
+      }, {
+        value: 'N', label: '否'
+      }],
+      customerOptions: [],
+      personOptions: [],
+      deptOptions: [],
+      tableList: [],
+      total: 0,
+      rowDetail: {},
+      disable: false,
+      ids: []
+    }
+  },
+  created() {
+    this.getList(this.queryParams)
+  },
+  methods: {
+    // 格式化表格内容
+    formatterStatus(row) {
+      switch(row.state){
+        case '0':
+          return '未确认'
+        case '1':
+          return '已确认'
+        case '2':
+          return '作废'
+      }
+    },
+    searchList() {
+      this.getList(this.queryParams)
+    },
+    resetList() {
+      this.queryParams = {
+        planCode: '',
+        planName: '',
+        charger: '',
+        chargerName: '',
+        dept: '',
+        deptName: '',
+        startDate: '',
+        deadlineTime: '',
+        type: '',
+        state: '',
+        marketingArea: '',
+        marketingAreaName: '',
+        pageNum: 1,
+        pageSize: 10
+      }
+      this.getList(this.queryParams)
+    },
+    getList(params){
+      getPlanList(params).then(res => {
+        if (res.code === 200) {
+          this.tableList = res.rows
+          this.total = res.total
+          console.log(res, 'res-------')
+        }
+      })
+    },
+    handleSelectionChange(selection) {
+      console.log('选中', selection)
+      this.ids = selection.map(item => item.id)
+      console.log('选中数组', this.ids.join())
+    },
+    mbDownload() {
+      downLoadDemand(this.download).then(res => {
+        console.log('下载的文件流', res)
+        const blob = new Blob([res], {
+          type: "application/vnd.ms-excel;charset=UTF-8",
+        });// 创建一个类文件对象：Blob对象表示一个不可变的、原始数据的类文件对象
+        const downloadElement = document.createElement("a"); //创建a标签
+        const href = window.URL.createObjectURL(blob); // 创建下载的链接
+        // var temp = res.headers["content-disposition"]; 
+        // var fileName = decodeURIComponent(temp.split("filename=")[1]); // 中文需要转码 (前端乱码）
+        // var name = fileName.split(";")[0]; //切割成文件名
+        downloadElement.href = href;  //下载地址
+        downloadElement.download = '模板'; // 下载后文件名
+        document.body.appendChild(downloadElement);
+        downloadElement.click(); // 点击下载
+        document.body.removeChild(downloadElement); // 下载完成移除元素
+        window.URL.revokeObjectURL(href); // 释放blob对象
+        this.download.open = false
+      })
+    },
+    // 关闭模板下载弹窗清空参数
+    clearDownload() {
+      // 模板下载参数
+      this.download =  {
+        open: false,
+        customer: '',
+        warehouse: '',
+        warehouseId: '',
+        cargoSpace: '',
+        category: ''
+      }
+    },
+    handleCommand(command) {
+      // alert(command)
+      if(command == '模板下载') {
+        this.download.open = true
+      }
+      if (command == '数据导入') {
+        this.upload.title = "用户导入"
+        this.upload.open = true
+      }
+    },
+    // 文件上传中处理
+    handleFileUploadProgress(event, file, fileList) {
+      this.upload.isUploading = true;
+    },
+    // 文件上传成功处理
+    handleFileSuccess(response, file, fileList) {
+      this.upload.open = false;
+      this.upload.isUploading = false;
+      this.$refs.upload.clearFiles();
+      this.$alert(response.msg, "导入结果", { dangerouslyUseHTMLString: true });
+      this.getList(this.queryParams);
+    },
+    errorFile(err) {
+      this.$modal.notifyError("文件已变动，请重新上传");
+    },
+    // 提交上传文件
+    submitFileForm() {
+      this.$refs.upload.submit();
+    },
+    handleExport(command) {
+      if(command == '选中导出') {
+        if (this.ids.length == 0) {
+          this.$modal.msgWarning("请选中至少一条数据");
+        } else {
+          let param = {all: false, ids: this.ids}
+          exportDemand(param).then(res => {
+            const blob = new Blob([res], {
+              type: "application/vnd.ms-excel;charset=UTF-8",
+            });// 创建一个类文件对象：Blob对象表示一个不可变的、原始数据的类文件对象
+            const downloadElement = document.createElement("a"); //创建a标签
+            const href = window.URL.createObjectURL(blob); // 创建下载的链接
+            // var temp = res.headers["content-disposition"]; 
+            // var fileName = decodeURIComponent(temp.split("filename=")[1]); // 中文需要转码 (前端乱码）
+            // var name = fileName.split(";")[0]; //切割成文件名
+            downloadElement.href = href;  //下载地址
+            downloadElement.download = '选中导出'; // 下载后文件名
+            document.body.appendChild(downloadElement);
+            downloadElement.click(); // 点击下载
+            document.body.removeChild(downloadElement); // 下载完成移除元素
+            window.URL.revokeObjectURL(href); // 释放blob对象
+          })
+        }
+      } else {
+        let param2 = {all: true}
+        exportDemand(param2).then(res => {
+          const blob = new Blob([res], {
+            type: "application/vnd.ms-excel;charset=UTF-8",
+          });// 创建一个类文件对象：Blob对象表示一个不可变的、原始数据的类文件对象
+          const downloadElement = document.createElement("a"); //创建a标签
+          const href = window.URL.createObjectURL(blob); // 创建下载的链接
+          // var temp = res.headers["content-disposition"]; 
+          // var fileName = decodeURIComponent(temp.split("filename=")[1]); // 中文需要转码 (前端乱码）
+          // var name = fileName.split(";")[0]; //切割成文件名
+          downloadElement.href = href;  //下载地址
+          downloadElement.download = '全部导出'; // 下载后文件名
+          document.body.appendChild(downloadElement);
+          downloadElement.click(); // 点击下载
+          document.body.removeChild(downloadElement); // 下载完成移除元素
+          window.URL.revokeObjectURL(href); // 释放blob对象
+        })
+      }
+    },
+    addDivision() {
+      this.isList = false
+      this.page = 'add'
+      this.disable = false
+    },
+    check(row) {
+      this.isList = false
+      this.page = 'check'
+      this.rowDetail = row
+      this.disable = true
+    },
+    edit(row) {
+      this.isList = false
+      this.page = 'edit'
+      this.rowDetail = row
+      this.disable = false
+    },
+    commit(row) {
+      console.log('row', row)
+      this.$modal.loading("提交中...");
+      submitPlan(row).then(res => {
+        if (res.code === 200) {
+          this.$modal.msgSuccess("提交成功");
+          this.$modal.closeLoading();
+          this.getList(this.queryParams)
+        }
+      }).catch(err => {
+        this.$modal.closeLoading();
+      })
+    },
+    // 行内删除
+    deleteids(row) {
+      console.log('row', row)
+      this.$modal.confirm('确定删除选择数据?').then(() => {
+        delPlan(row.id).then(res => {
+          if (res.code === 200) {
+            this.$modal.msgSuccess("删除成功");
+            this.getList(this.queryParams)
+          }
+        })
+      }).catch(() => {})
+    },
+    // 批量删除按钮
+    delItems() {
+      if(this.ids.length == 0) {
+        this.$modal.msgWarning("请选中至少一条数据");
+      } else {
+        let param = this.ids.join()
+        this.$modal.confirm('确认信息').then(() => {
+        delPlan(param).then(res => {
+          if (res.code === 200) {
+            this.$modal.msgSuccess("删除成功");
+            this.getList(this.queryParams)
+          }
+        })
+        }).catch(() => {})
+      }
+    },
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+      this.queryParams.pageSize = val
+      this.getList(this.queryParams)
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+      this.queryParams.pageNum = val
+      this.getList(this.queryParams)
+    },
+    drop() {
+      this.expanded = !this.expanded
+    },
+    // 搜索区参照选择
+    chooseOrg(type, isPage, title, stordocId) {
+      this.referCondition.type = type
+      this.referCondition.isPage = isPage
+      this.referCondition.title = title
+      this.referCondition.stordocId = stordocId
+      this.$refs.refer.init(this.referCondition)
+    },
+    selectionsToInput(selection) {
+      // 搜索区选择客户
+      if (this.referCondition.type == 'CUSTOMER_PARAM' && this.referCondition.title == '需求客户') {
+        this.customerOptions = selection
+        this.queryParams.customer = selection[0].id
+      }
+      // 模板内选择客户
+      if (this.referCondition.type == 'CUSTOMER_PARAM' && this.referCondition.title == '选择客户') {
+        this.mBcustomer = selection
+        this.download.customer = selection[0].code
+      }
+      // 模板内选择仓库
+      if (this.referCondition.type == 'WAREHOUSE_PARAM' && this.referCondition.title == '选择仓库') {
+        this.mBwarehouse = selection
+        this.download.warehouse = selection[0].code
+        this.download.warehouseId = selection[0].id
+      }
+      // 模板内选择货位
+      if (this.referCondition.type == 'ALLOCATION_PARAM' && this.referCondition.title == '选择货位') {
+        this.mBcargoSpace = selection
+        this.download.cargoSpace = selection[0].code
+      }
+      if (this.referCondition.type == 'CONTACTS_PARAM') {
+        this.personOptions = selection
+        this.queryParams.charger = selection[0].name
+        this.queryParams.chargerName = selection[0].name
+      }
+      if (this.referCondition.type == 'DEPT_PARAM') {
+        this.deptOptions = selection
+        this.queryParams.demandDept = selection[0].id
+      }
+    },
+    // 搜索区树形选择
+    chooseTreeRefer(type, isPage, title) {
+      this.referCondition.type = type
+      this.referCondition.isPage = isPage
+      this.referCondition.title = title
+      this.$refs.tree.init(this.referCondition)
+    },
+    selectionsToInput2(selection) {
+      this.classOptions.push(selection)
+      this.download.category = selection.code
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+#PlanLise {
+  height: calc(100vh - 84px);
+  padding: 12px;
+  box-sizing: border-box;
+  overflow-y: scroll;
+}
+.btn_grooup {
+  margin-bottom: 10px;
+  display: flex;
+  justify-content: flex-end;
+}
+.lines {
+  margin-top: 0;
+}
+.el-pagination {
+  margin-top: 10px;
+  text-align: right;
+}
+</style>