drp-ui/src/views/business/spd/bo/plan/index.vue

<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 v-model="queryParams.type" size="mini" style="width: 200px">
                  <el-option v-for=" dict in dict.type.mk_plan_route_type" :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="执行人">
              <el-select clearable size="mini" v-model="queryParams.chargerName" @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="" 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="choose('MK_SALESAREA_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="choose('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.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="时间范围">
                    <el-date-picker
                      size="mini"
                      v-model="dateRange"
                      style="width: 200px"
                      value-format="yyyy-MM-dd"
                      type="daterange"
                      range-separator="-"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      />
                  </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="560"
        style="font-size: 12px;"
        v-horizontal-scroll
        @selection-change="handleSelectionChange"
        :row-class-name="tableRowClassName"
        @row-dblclick="getEmpDetail"
        >
          <el-table-column type="selection" align="center" min-width="55" />
          <el-table-column type="index" label="序号" min-width="50" align="center"/>
          <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="200" 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" v-if="scope.row.state == '0'" @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, 20, 50, 100]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total=total>
        </el-pagination>
      </el-card>
    </div>

    <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, exportPlan, submitPlan } from '@/api/business/spd/task_management/visitingPlan/visitingPlan.js'
export default {
  name: 'PlanLise',
  components: {
    Add,
    CollapseTransition,
    Refers,
    TreeRefers
  },
  dicts: ['mk_plan_state', 'mk_plan_route_type'],
  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: ''
      },
      personOptions: [],
      deptOptions: [],
      tableList: [],
      total: 0,
      rowDetail: {},
      disable: false,
      ids: [],
      // 查询日期范围
      dateRange: [],
    }
  },
  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.dateRange = [];
      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(this.addDateRange(params, this.dateRange)).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}
          exportPlan(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}
        exportPlan(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)
    // },
    // 基本信息选择参照带出数据
    choose(type, isPage, title) {
      this.referCondition.type = type
      this.referCondition.isPage = isPage
      this.referCondition.title = title
      this.$refs.refer.init(this.referCondition)
    },
    selectionsToInput(selection) {
      if (this.referCondition.type == 'CONTACTS_PARAM') {
        this.personOptions = selection
        this.queryParams.charger = selection[0].id
        this.queryParams.chargerName = selection[0].name
      }
      if (this.referCondition.type == 'DEPT_PARAM') {
        this.deptOptions = selection
        this.queryParams.dept = selection[0].id
        this.queryParams.deptName = selection[0].name
      }
      if(this.referCondition.type == 'MK_SALESAREA_PARAM') {
        this.personOptions = selection
        this.queryParams.marketingArea = selection[0].id
        this.queryParams.marketingAreaName = selection[0].name
      }
    },
    selectionsToInput2(selection) {
      this.classOptions.push(selection)
      this.download.category = selection.code
    },
    tableRowClassName({ row, rowIndex }) {
      row.index = rowIndex;
    },
    getEmpDetail(row, event, column) {
      let index = row.index;
      console.log(index) //此时的index就是单选行的下标
      this.check(row)
      //this.index = row.index;  也可以直接在data（）定义一个值来存放下标
    },
  }
}
</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>