zhonghan2.0/src/views/BasicSettings/WarehouseManage/index.vue

<template>
  <div>
    <Toptitle>
      <template #left>
        <Button type="primary" @click="is_open = !is_open">{{
          is_open ? "收缩" : "展开"
        }}</Button>
      </template>
      <template #right>
        <Dropdown style="margin-left: 20px" @on-click="handleClick">
          <Button type="primary">
            操作
            <Icon type="ios-arrow-down"></Icon>
          </Button>
          <DropdownMenu slot="list">
            <DropdownItem :name="1">新增</DropdownItem>
            <DropdownItem :name="2">批量删除</DropdownItem>
            <DropdownItem :name="3">导出</DropdownItem>
          </DropdownMenu>
        </Dropdown>
      </template>
    </Toptitle>
    <div
      :style="
        is_open
          ? 'max-height:200px;transition: all .5s;'
          : 'max-height:0px;overflow: hidden;transition: all .5s;'
      "
    >
      <Form :label-width="120" style="display: flex; flex-wrap: wrap">
        <FormItem label="管理员">
          <Select
            v-model="searchData.employee_id"
            filterable
            clearable
            transfer
            style="width: 200px"
          >
            <Option
              v-for="item in employeeList"
              :key="item.id"
              :value="item.id"
              :label="item.emp_name"
            />
          </Select>
        </FormItem>
        <FormItem label="仓库名称">
          <Input
            v-model="searchData.title"
            clearable
            style="width: 200px"
            placeholder="请输入"
          />
        </FormItem>
        <FormItem :label-width="30">
          <Button type="primary" @click="handleSearch">查询</Button>
        </FormItem>
      </Form>
    </div>
    <div style="max-height: calc(100% - 150px); border: 1px solid #fff">
      <vxe-grid
        v-bind="gridOptions"
        @checkbox-change="handleSelect"
        @checkbox-all="handleSelectAll"
      >
        <template #set="{ row }">
          <a style="margin-right: 10px" @click="handleEdit(row)">编辑</a>
          <a @click="handleDel(row)">删除</a>
        </template>
      </vxe-grid>
    </div>
    <div style="text-align: center; margin-top: 10px">
      <Page
        show-elevator
        :page-size-opts="[10, 20, 30, 40, 100, 1000]"
        @on-page-size-change="changeSize"
        @on-change="changePage"
        :current="pageIndex"
        show-total
        :total="total"
        show-sizer
        :page-size="pageSize"
      />
    </div>
    <Modal
      draggable
      title="新增"
      width="80"
      :closable="false"
      :mask-closable="false"
      v-model="is_show"
    >
      <div style="max-height: 450px; overflow: auto">
        <Form
          :label-width="100"
          v-for="(item, index) in modalData"
          :key="index"
          style="display: flex"
        >
          <FormItem label="管理员" style="width: 30%">
            <Select v-model="item.employee_id" filterable clearable transfer>
              <Option
                v-for="_item in employeeList"
                :key="_item.id"
                :value="_item.id"
                :label="_item.emp_name"
              />
            </Select>
          </FormItem>
          <FormItem label="仓库名称" style="width: 30%">
            <Input clearable placeholder="请输入" v-model="item.title" />
          </FormItem>
          <FormItem label="关联集团">
            <Select v-model="item.company" filterable clearable transfer>
              <Option
                  v-for="_item in companyList"
                  :key="_item.id"
                  :value="_item.id"
                  :label="_item.title"
              />
            </Select>
          </FormItem>
          <FormItem :label-width="40" style="width: 20%">
            <div class="icon">
              <Icon
                :size="20"
                type="ios-add-circle-outline"
                style="margin-right: 10px; cursor: pointer"
                @click="handleModalAdd(index)"
              />
              <Icon
                :size="20"
                type="ios-remove-circle-outline"
                style="cursor: pointer"
                @click="handleModalRemove(index)"
              />
            </div>
          </FormItem>
        </Form>
      </div>
      <div slot="footer">
        <Button style="margin-right: 10px" @click="is_show = false"
          >取消</Button
        >
        <Button type="primary" @click="handleSure">确认</Button>
      </div>
    </Modal>
    <Modal
      draggable
      title="编辑"
      width="40"
      :closable="false"
      :mask-closable="false"
      v-model="is_edit"
    >
      <Form :label-width="100">
        <FormItem label="管理员">
          <Select v-model="editData.employee_id" filterable clearable transfer>
            <Option
              v-for="_item in employeeList"
              :key="_item.id"
              :value="_item.id"
              :label="_item.emp_name"
            />
          </Select>
        </FormItem>
        <FormItem label="仓库名称">
          <Input clearable placeholder="请输入" v-model="editData.title" />
        </FormItem>
        <FormItem label="关联集团">
          <Select v-model="editData.company" filterable clearable transfer>
            <Option
                v-for="_item in companyList"
                :key="_item.id"
                :value="_item.id"
                :label="_item.title"
            />
          </Select>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button style="margin-right: 10px" @click="is_edit = false"
          >取消</Button
        >
        <Button type="primary" @click="handleSureEdit">确认</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
export default {
  data() {
    return {
      pageSize: 10,
      pageIndex: 1,
      total: 0,
      searchData: {
        employee_id: '',
        title: ""
      },
      is_edit: false,
      is_open: false,
      editData: {},
      proxyData: {},
      modalData: [],
      companyList:[],
      is_show: false,
      selectData: [],
      gridOptions: {
        maxHeight: 'auto',
        border: true,
        showOverflow: true,
        rowId: 'id',
        rowConfig: {
          isHover: true
        },
        columnConfig: {
          resizable: true
        },
        data: [],
        columns: [
          { type: 'checkbox', width: 80 },
          { title: '操作', slots: { default: 'set' }, width: 150, align: 'center' },
          { field: 'emp_name', title: '管理员', width: 220 },
          { field: 'title', title: '仓库名称' },
          { field: 'company_name', title: '关联集团' },
        ]
      },
      employeeList: [],
    }
  },
  created() {
    //获取人员列表
    this.axios.post('/api/employeeList').then(res => {
      this.employeeList = res.data.data;
    })
    //获取集团列表
    this.axios.post('/api/companyList').then(res=>{
      this.companyList = res.data.data;
    })
  },
  mounted() {
    this.initData();
  },
  methods: {
    changeSize(e) {
      this.pageSize = e;
      this.pageIndex = 1;
      this.initData(this.proxyData)
    },
    changePage(e) {
      this.pageIndex = e;
      this.initData(this.proxyData);
    },
   async handleClick(name) {
      if (name == 1) {
        this.handleAdd();
      } else if(name == 2){
        this.handleDel();
      }else {
        if(this.selectData.length==0){
          return this.$Message.warning('请选择需要导出的数据！')
        }
        let id = this.selectData.map(v=>v.id);
        const res = await this.axios.post('/api/exportFile',{type:18,id})
        if(res.code === 200){
          let url = `${this.$store.state.ip}/api/getExport/${res.data.file}`
          location.href = url
        }
      }
    },
    handleSearch() {
      this.proxyData = JSON.parse(JSON.stringify(this.searchData));
      this.pageIndex = 1;
      this.initData(this.proxyData);
    },
    handleModalAdd(index) {
      this.modalData.splice(index + 1, 0, { employee_id: '', title: "" })
    },
    handleModalRemove(index) {
      this.modalData.splice(index, 1)
    },
    handleSure() {
      let data = JSON.parse(JSON.stringify(this.modalData))
      data.forEach(v=>{
        v.company = [v.company]
      })
      this.axios.post('/api/storehouseAdd', { data }).then(res => {
        if (res.code == 200) {
          this.$Message.success(res.msg);
          this.initData(this.proxyData);
          this.is_show = false;
        }
      })
    },
    handleSureEdit() {
      let id = this.editData.id;
      let data = [{ employee_id: this.editData.employee_id, title: this.editData.title ,company:[this.editData.company]}]
      this.axios.post('/api/storehouseEdit', { id, data }).then(res => {
        if (res.code == 200) {
          this.$Message.success(res.msg);
          this.initData(this.proxyData);
          this.is_edit = false;
        }
      })
    },
    handleSelectAll(e) {
      this.selectData = e.records;
    },
    handleSelect(e) {
      this.selectData = e.records;
    },
    initData(row) {
      this.axios.post('/api/storehouseList', { ...row, page_index: this.pageIndex, page_size: this.pageSize }).then(res => {
        this.gridOptions.data = res.data.data;
        this.total = res.data.total;
      })
    },
    handleEdit(row) {
      this.is_edit = true;
      this.editData = JSON.parse(JSON.stringify(row));
      this.editData.company = this.editData.company_id.length==1?this.editData.company_id[0]:'';
    },
    handleAdd() {

      // if (type == 1) {//新增
      this.modalData = [
        {
          employee_id: '',
          title: ''
        }
      ]
      this.is_show = true;
      // }
      //  else {//编辑
      //   if (this.getBol(this.selectData)) {
      //     this.is_show = true;
      //   } else {
      //     return this.$Message.warning('请选择一个子集团！')
      //   }
      //   let data = this.getData(this.selectData);
      //   this.modalData = { id: data.id, employee_id: data.employee_id, title: data.title }
      // }
    },
    // getData(arr) {
    //   let obj = {};
    //   arr.forEach(v => {
    //     if (v.children.length == 0) {
    //       obj = v;
    //     } else {
    //       obj = this.getData(v.children);
    //     }
    //   })
    //   return obj;
    // },
    // getBol(arr) {
    //   let bol = true;
    //   let ids = arr.map(v => v.id);
    //   let fid = [this.selectData[0].id, ...this.getChildren(this.selectData[0].children)];
    //   let length = arr.map(v => v.employee_id.length);
    //   let setLength = Array.from(new Set(length));
    //   if (length.length == setLength.length) {
    //     ids.forEach(v => {
    //       if (fid.indexOf(v) == -1) {
    //         return bol = false
    //       }
    //     })
    //   } else {
    //     bol = false;
    //   }



    //   return bol
    // },

    // getChildren(arr) {
    //   let id = [];
    //   arr.forEach(v => {
    //     id.push(v.id);
    //     if (v.children.length != 0) {
    //       id = [id, ...this.getChildren(v.children)];
    //     }
    //   })
    //   return id;
    // },
    handleDel(row) {
      let id = [];
      if (row) {
        id = [row.id];
      } else {
        if (this.selectData.length == 0) {
          return this.$Message.warning('请选择数据！');
        }
        id = this.selectData.map(v => (v.id));
      }
      this.$Modal.confirm({
        title: '删除',
        content: '确认删除嘛？',
        onOk: () => {
          this.axios.post('/api/storehouseDel', {id}).then(res => {
            if (res.code == 200) {
              this.$Message.success(res.msg);
              if (this.pageIndex != 1 && !(this.gridOptions.data.length - id.length)) {
                this.pageIndex--;
              }
              this.selectData = [];

              this.initData(this.proxyData)
            }
          })
        }
      })
    },
  }
}
</script>
<style lang="scss" scoped>
.icon {
  display: flex;
  width: 80px;
  justify-content: space-between;
  align-items: center;
  height: 44px;
}
</style>