supply-front/src/views/basic_data/dealer/dealer_stock.vue

<template>
  <template-page
    ref="pageRef"
    :getList="getList"
    :optionsEvensGroup="optionsEvensGroup"
    :exportList="exportList"
    :operation="operation()"
    :tableEvents="tableEvents"
    :tableAttributes="tableAttributes"
    :columnParsing="columnParsing"
  >
    <el-dialog :title="title" :visible.sync="dialogForm" width="50%" :show-close="false" :close-on-click-modal="false">
      <el-form ref="addForm" :model="addForm" :rules="rules" label-width="100px" label-position="left">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="经销商名称" prop="customerId">
              <el-select
                filterable
                class="selectStyle"
                v-model="addForm.customerId"
                placeholder="请选择"
                @change="changeFn"
              >
                <el-option v-for="item in dealerList" :key="item.id" :label="item.name" :value="item.id"> </el-option>
              </el-select> </el-form-item
          ></el-col>
          <el-col :span="12"
            ><el-form-item label="经销商编码" prop="customerNumber">
              <el-input disabled v-model="addForm.customerNumber"></el-input> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item label="金蝶部门编号" prop="k3OrgNumber">
              <el-select class="selectStyle" v-model="addForm.k3OrgNumber" placeholder="请选择" filterable>
                <el-option
                  v-for="item in k3DepartmentList"
                  :key="item.number"
                  :label="item.name + '（' + item.number + '）'"
                  :value="item.number"
                >
                </el-option>
              </el-select> </el-form-item
          ></el-col>
          <el-col :span="12"
            ><el-form-item label="钱包" prop="customerWalletId">
              <el-select class="selectStyle" v-model="addForm.customerWalletId" placeholder="请选择" filterable>
                <el-option
                  v-for="item in walletList"
                  :key="item.customerWalletId"
                  :label="item.customerWalletName"
                  :value="item.customerWalletId"
                >
                </el-option>
              </el-select> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item label="区域" prop="region">
              <el-cascader
                ref="locationCascader"
                v-model="addForm.region"
                class="selectStyle"
                :options="options"
                :props="props"
                clearable
              ></el-cascader> </el-form-item
          ></el-col>
          <el-col :span="12"
            ><el-form-item label="对应业务员" prop="serviceId">
              <el-select class="selectStyle" v-model="addForm.serviceId" placeholder="请选择" filterable>
                <el-option v-for="(item, i) in userList" :key="i" :label="item.nickName" :value="item.adminUserId">
                </el-option>
              </el-select> </el-form-item
          ></el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelFn">取 消</el-button>
        <el-button type="primary" @click="addDataListFn">确 定</el-button>
      </div>
    </el-dialog>
  </template-page>
</template>

<script>
import TemplatePage from '@/components/template/template-page-1.vue'
import import_mixin from '@/components/template/import_mixin.js'
import add_callback_mixin from '@/components/template/add_callback_mixin.js'
import Popu from '@/components/template/popu.vue'
import {
  getDealerStockListV2,
  exportDealerStockListV2,
  getDealerStockAdd,
  deleDealerStockList,
  getDictionaries,
  getProductCategoryList,
  getAdminWebsitByparent,
  getAdminUserList,
  getCustomerPtDetail,
  getCustomerPtUpdate,
  getWalletCustomerList,
  getK3DepartmentList,
  downloadCustomerPtV2,
  importCustomerPtV2
} from '@/api/basic_data/dealer'
import { getDealerList } from '@/api/basic_data/dealer'
import { getDepartmentList } from '@/api/setting'
export default {
  components: { TemplatePage, Popu },
  mixins: [import_mixin, add_callback_mixin],
  data() {
    return {
      visible: false,
      // 事件组合
      optionsEvensGroup: [
        [
          [
            {
              name: '新增',
              click: this.addOn(() => {
                this.addFn()
              }),
              isRole: this.$checkBtnRole('add', this.$route.meta.roles)
            }
          ]
        ],
        [
          [
            {
              name: '批量删除',
              click: async () => {
                if (this.recordSelected.length === 0) {
                  this.$message.error('请选择需要删除的数据')
                  return
                }
                let ids = this.recordSelected.map(v => {
                  return v.id
                })
                let params = { ids: ids.toString() }
                await deleDealerStockList(params)
                this.$refs.pageRef.refreshList()
                this.$message.success('批量删除成功')
              },
              isRole: this.$checkBtnRole('del', this.$route.meta.roles)
            }
          ]
        ],
        [
          [
            {
              name: '导入',
              render: this.importButton(importCustomerPtV2)
            }
          ]
        ],
        [
          [
            {
              name: '导入模版',
              click: () => {
                downloadCustomerPtV2({}, `${this.$route.meta.title}`)
                  .then(res => {
                    this.$message({
                      message: '下载成功',
                      type: 'success'
                    })
                  })
                  .catch(err => {
                    this.$message.error('下载失败')
                  })
              }
            }
          ]
        ]
      ],
      // 表格属性
      tableAttributes: {
        // 启用勾选列
        selectColumn: true
      }, // 关闭新增弹窗
      // 表格事件
      tableEvents: {
        'selection-change': this.selectionChange
      },
      recordSelected: [],
      props: {
        checkStrictly: true,
        value: 'adminWebsitId',
        label: 'name'
      },
      options: [],
      importFileList: [],
      isDisabled: true,
      title: '',
      dialogForm: false,
      addForm: {
        customerId: '',
        customerName: '',
        customerNumber: '',
        k3OrgNumber: '',
        region: [],
        serviceId: '',
        customerWalletId: ''
      },
      mainId: null,
      rules: {
        customerId: [{ required: true, message: '请选择经销商名称', trigger: 'change' }],
        customerWalletId: [{ required: true, message: '请选择经销商钱包', trigger: 'change' }],
        region: [{ required: true, message: '请选择区域', trigger: 'change' }],
        serviceId: [{ required: true, message: '请选择业务员', trigger: 'change' }]
      },

      currentPage: 1, // 当前页码
      pageSize: 10, // 每页数量
      listTotal: 0, // 列表总数

      searchForm: {
        customerName: ''
      },
      isCollapse: true,
      dataList: [], // 列表数据
      listLoading: false, // 列表加载loading
      dealerList: [],
      walletList: [], //产品大类列表
      userList: [], //业务员
      ids: [],
      rowID: null, //编辑ID
      k3DepartmentList: []
    }
  },
  watch: {
    'addForm.region': function (newValue) {
      // console.log(newValue, 888);
      if (newValue) {
        this.getUserList(newValue[newValue.length - 1])
      }
    },
    'addForm.customerId': async function (newValue) {
      if (newValue) {
        // this.addForm.customerWalletId = "";
        const res = this.dealerList.filter(i => i.id == newValue)
        this.addForm.customerName = res[0].name
        this.addForm.customerNumber = res[0].number
        let res2 = await getWalletCustomerList({
          customerId: newValue,
          type: 'COMMONLY'
        })
        this.walletList = res2.data
      }
    }
  },
  async created() {
    this.getTree()
    this.getK3DepartmentList()
    this.getDealerDataList({ pageNum: 1, pageSize: -1 })
    this.getUserList(1)
  },
  methods: {
    // 列表请求函数
    getList(...p) {
      this.recordSelected = []
      return getDealerStockListV2(...p)
    },
    // 列表导出函数
    exportList: exportDealerStockListV2,
    // 表格列解析渲染数据更改
    columnParsing(item, defaultData) {
      return defaultData
    },
    // 监听勾选变化
    selectionChange(data) {
      this.recordSelected = data
    },
    operation() {
      return (h, { row, index, column }) => {
        return (
          <div class="operation-btns">
            {this.$checkBtnRole('edit', this.$route.meta.roles) ? (
              <el-button
                size="mini"
                type="text"
                onClick={() => {
                  this.editFn(row.id)
                }}
              >
                编辑
              </el-button>
            ) : null}
            {this.$checkBtnRole('del', this.$route.meta.roles) ? (
              <el-popconfirm onOnConfirm={() => this.deleFn(row.id)} title="这是一段内容确定删除吗？">
                <el-button style="font-size:12px" type="text" size="mini" slot="reference">
                  删除
                </el-button>
              </el-popconfirm>
            ) : null}
          </div>
        )
      }
    },
    handleClose() {
      this.addOff(() => {
        this.visible = false
      })()
    },
    // 导入
    async handleImport(param) {
      const file = param.file
      const formData = new FormData()
      formData.append('file', file)
      let result = await handleImport('customer/pt/importData', formData)
      this.importFileList = []
      if (result.code == 200) {
        this.$message.success('导入成功')
        await this.$refs.pageRef.refreshList()
      } else {
        this.$message.error(result.message)
      }
    },
    getK3DepartmentList() {
      getK3DepartmentList().then(res => {
        this.k3DepartmentList = res.data
      })
    },
    //下载模板
    downLoadFn() {
      downloadFiles('customer/pt/download')
    },
    //下载模板
    downLoadFns() {
      downloadFiles('customer/pt/export')
    },
    //编辑
    async changeFn(v) {
      this.addForm.customerWalletId = ''
    },
    async editFn(id) {
      this.title = '经销商业务关系管理 '
      this.rowID = id
      let res = await getCustomerPtDetail({ id })
      this.addForm.customerId = res.data.customerId
      this.addForm.customerWalletId = res.data.customerWalletId
      this.addForm.region = [res.data.adminWebsitId1, res.data.adminWebsitId2, res.data.adminWebsitId3]
      this.addForm.serviceId = res.data.serviceId
      this.addForm.k3OrgNumber = res.data.k3OrgNumber
      this.dialogForm = true
    },
    //获取业务员数据
    async getUserList(v) {
      let res = await getAdminUserList({
        pageNum: 1,
        pageSize: -1,
        isCustomer: 0,
        adminWebsitId: v
      })
      if (res.data.records.length == 0) {
        this.addForm.serviceId = ''
      }
      this.userList = res.data.records
    },
    // 获取部门列表
    getTree() {
      getDepartmentList().then(res => {
        // console.log(res, 8888);

        this.options = res.data[0].children
      })
    },

    // 筛选部分数据或者单个
    hanleSelect(selection) {
      // this.ids = selection.map((k) => {
      //   return k.id;
      // });

      // console.log(selection);
      this.ids = selection.map(v => v.id)
    },
    // //存货分类
    // async getSelectList(data) {
    //   const res = await getDictionaries(data);
    //   console.log(res);
    //   this.selectList = res.data;
    // },
    //删除
    async deleFn(id) {
      if (id) {
        let arr = []
        arr.push(id)
        let res2 = arr.toString()
        await deleDealerStockList({ ids: res2 })
      } else {
        let res = this.ids.toString()
        await deleDealerStockList({ ids: res })
      }

      this.$refs.pageRef.refreshList()

      this.$message.success('删除成功')
      this.ids = []
    },
    async addFn() {
      this.title = '经销商业务关系管理'

      this.dialogForm = true
    },
    async addDataListFn() {
      await this.$refs.addForm.validate()

      let data2 = this.walletList.filter(v => {
        return v.customerWalletId == this.addForm.customerWalletId
      })
      let data3 = this.userList.filter(v => {
        return v.adminUserId == this.addForm.serviceId
      })

      let value = {
        customerId: this.addForm.customerId,
        customerName: this.addForm.customerName,
        customerNumber: this.addForm.customerNumber,
        customerWalletId: this.addForm.customerWalletId,
        customerWalletName: data2[0].customerWalletName,
        k3OrgNumber: this.addForm.k3OrgNumber,
        serviceId: this.addForm.serviceId,
        serviceName: data3[0].nickName
      }

      if (this.title == '经销商业务关系管理 ') {
        await getCustomerPtUpdate({ ...value, id: this.rowID })

        this.$message.success('编辑成功')
      } else {
        await getDealerStockAdd(value)
        this.$message.success('添加成功')
      }
      if (this.$refs.locationCascader) {
        this.$refs.locationCascader.$refs.panel.activePath = []
        this.$refs.locationCascader.$refs.panel.calculateCheckedNodePaths()
      }
      this.addForm.customerId = ''
      this.addForm.customerNumber = ''
      this.addForm.customerName = ''
      this.addForm.customerWalletId = ''
      this.addForm.region = []
      this.addForm.k3OrgNumber = ''
      this.addForm.serviceId = ''
      this.walletList = []
      this.$nextTick(() => {
        this.$refs['addForm'].clearValidate()
      })
      this.$refs.pageRef.refreshList()
      this.dialogForm = false
    },
    //取消
    async cancelFn() {
      if (this.$refs.locationCascader) {
        this.$refs.locationCascader.$refs.panel.activePath = []
        this.$refs.locationCascader.$refs.panel.calculateCheckedNodePaths()
      }

      this.addForm.customerId = ''
      this.addForm.customerNumber = ''
      this.addForm.customerWalletId = ''
      this.addForm.region = []
      this.addForm.k3OrgNumber = ''
      // this.addForm.oneParentId = "";
      // this.addForm.twoParentId = "";
      // this.addForm.threeParentId = "";
      this.addForm.serviceId = ''
      // this.userList = [];
      // this.twoList = [];
      // this.threeList = [];
      this.walletList = []

      this.$nextTick(() => {
        this.$refs['addForm'].clearValidate()
      })
      this.dialogForm = false
    },
    //获取经销商数据
    async getDealerDataList(data) {
      const res = await getDealerList(data)
      this.dealerList = res.data.records
    }
  }
}
</script>

<style lang="scss" scoped>
.add-right {
  margin-right: 10px;
}
.import-btn {
  margin-left: 10px;
  display: inline-block;
}
// ::v-deep .selectStyle .el-input--suffix {
//   width: 200%;
// }

// ::v-deep .el-input--suffix {
//   width: 300px;
// }
// ::v-deep .el-dialog__header {
//   background-color: #dddddd;
// }
// ::v-deep .dialog-footer {
//   display: flex;
//   justify-content: center;
// }

// .formWidth {
//   width: 70%;
//   margin-right: 20px;
// }
.selectStyle {
  width: 100%;
}
</style>