zhonghan2.0/src/views/BusinessManagement/MaterialReturn/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>
          </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="单据编号">
          <Input
            v-model="searchData.order_number"
            clearable
            style="width: 200px"
            placeholder="请输入"
          />
        </FormItem>
        <FormItem label="制单日期">
          <DatePicker
            v-model="searchData.crt_time"
            clearable
            type="daterange"
            style="width: 200px"
            placeholder="年/月/日"
          />
        </FormItem>
        <FormItem label="4s店名称">
          <Select
            v-model="searchData.four_shop_id"
            filterable
            clearable
            style="width: 200px"
            transfer
          >
            <Option
              v-for="item in fourShopList"
              :key="item.id"
              :value="item.id"
              :label="item.title"
            />
          </Select>
        </FormItem>
        <FormItem label="所属集团">
          <Select
            transfer
            filterable
            clearable
            v-model="searchData.company_id"
            style="width: 200px"
          >
            <Option
              v-for="item in companyList"
              :key="item.id"
              :value="item.id"
              :label="item.title"
            />
          </Select>
        </FormItem>
        <FormItem label="所属区域">
          <Select
            transfer
            filterable
            clearable
            v-model="searchData.area"
            style="width: 200px"
          >
            <Option
              v-for="item in areaList"
              :key="item.id"
              :value="item.id"
              :label="item.title"
            />
          </Select>
        </FormItem>
        <FormItem label="退料类型" class="item">
          <Select
            transfer
            filterable
            style="width: 200px"
            clearable
            v-model="searchData.basic_type_id"
          >
            <Option
              v-for="item in workProductList"
              :key="item.id"
              :value="item.id"
              :label="item.title"
            />
          </Select>
        </FormItem>
        <FormItem label="退料人" class="item">
          <Select
            clearable
            filterable
            transfer
            style="width: 200px"
            v-model="searchData.return_person"
          >
            <Option
              v-for="item in employeeList"
              :key="item.id"
              :value="item.id"
              :label="item.emp_name"
            />
          </Select>
        </FormItem>
        <FormItem label="物流单号" class="item">
          <Input
            v-model="searchData.logistics_number"
            placeholder="请输入"
            clear
            able
            style="width: 200px"
          />
        </FormItem>
        <!-- <FormItem label="审核人">
          <Select clearable filterable transfer style="width: 200px">
            <Option
              v-for="item in employeeList"
              :key="item.id"
              :value="item.id"
              :label="item.emp_name"
            />
          </Select>
        </FormItem> -->
        <FormItem :label-width="40">
          <Button type="primary" @click="handleSearch">查询</Button>
        </FormItem>
      </Form>
    </div>
    <div class="table_content">
      <vxe-grid
        v-bind="gridOptions"
        @checkbox-all="selectAllEvent"
        @checkbox-change="selectChangeEvent"
      >
        <template #set="{ row }">
          <a style="margin-right: 10px" @click="handleSet(3, row)">详情</a>
          <a style="margin-right: 10px" @click="handleSet(2, row)">编辑</a>
          <a @click="handleDel(row)">删除</a>
        </template>
      </vxe-grid>
    </div>

    <Footer
      :pageSize="pageSize"
      :pageIndex="pageIndex"
      :total="total"
      @changeSize="changeSize"
      @changePage="changePage"
    ></Footer>
  </div>
</template>
<script>
export default {
  data() {
    return {
      employeeList: [],
      workProductList: [],
      areaList: [],
      companyList: [],
      is_open: false,
      pageSize: 10,
      pageIndex: 1,
      total: 0,
      sort: null,
      is_show: false,
      selectData: [],
      searchData: {},
      proxyData: {},
      gridOptions: {
        border: true,
        resizable: true,
        maxHeight: 'auto',
        showOverflow: true,
        align: 'left',
        columns: [
          { type: 'checkbox', width: 50, fixed: 'left' },
          { field: 'set', title: '操作', showHeaderOverflow: true, slots: { default: 'set' }, fixed: 'left', width: 160, align: 'center' },
          { field: 'crt_time', title: '制单日期', showHeaderOverflow: true, minWidth: 100 },
          { field: 'order_number', title: '单据编号', showHeaderOverflow: true, minWidth: 100 },
          { field: 'basic_type_name', title: '退料类型', showHeaderOverflow: true, minWidth: 100 },
          { field: 'four_shop_name', title: '4s店名称', showHeaderOverflow: true, minWidth: 100 },
          { field: 'company_name', title: '所属集团', showHeaderOverflow: true, minWidth: 100 },
          { field: 'area_name', title: '所属区域', showHeaderOverflow: true, minWidth: 100 },
          { field: 'storehouse_name', title: '仓库名称', showHeaderOverflow: true, minWidth: 100 },
          { field: 'logistics_company', title: '物流公司', showHeaderOverflow: true, minWidth: 100 },
          { field: 'logistics_number', title: '物流单号', showHeaderOverflow: true, minWidth: 100 },
          { field: 'return_person_name', title: '退料人', showHeaderOverflow: true, minWidth: 100 },
          // { field: 'warranty_day', title: '审核人', showHeaderOverflow: true, minWidth: 100 }
        ],
        data: []
      },
      fourShopList: []
    }
  },
  created() {
    //获取4s店列表
    this.axios.post('/api/foursShopList').then(res => {
      this.fourShopList = res.data.data;
    })
    //获取集团
    this.axios.post('/api/companyList').then(res => {
      this.companyList = res.data.data;
    })
    //获取区域
    this.axios.post('/api/areaList').then(res => {
      this.areaList = this.getArr(res.data);
    })
    //获取施工产品类型
    this.axios.post('/api/basicTypeList', { type: 4 }).then(res => {
      this.workProductList = res.data.data;
    })
    //获取人员列表
    this.axios.post('/api/employeeList').then(res => {
      this.employeeList = res.data.data;
    })
  },
  mounted() {
    this.initData();
  },
  methods: {
    getArr(arr) {
      let data = [];
      arr.forEach(ele => {

        if (ele.children.length != 0) {
          data = [...data, ...this.getArr(ele.children)];
        } else {
          data.push(ele);
        }
      });
      return data;
    },
    handleSet(num, row) {
      switch (num) {
        case 1://新增
          this.$router.push({ path: '/cms/BusinessManagement/MaterialReturn/detail', query: { type: 1, title: "新增退料单" } })
          break;
        case 2://编辑
          this.$router.push({ path: '/cms/BusinessManagement/MaterialReturn/detail', query: { type: 2, title: '编辑退料单', order_number: row.order_number } })
          break;
        case 3://详情
          this.$router.push({ path: '/cms/BusinessManagement/MaterialReturn/detail', query: { type: 3, title: '退料单详情', order_number: row.order_number } })
          break;
      }
    },
    handleClick(name) {

      if (name == 1) {//新增
        this.handleSet(1)
      } else if (name == 2) {//批量删除
        if (this.selectData.length == 0) {
          return this.$Message.warning('请选择数据！')
        }
        this.handleDel();
      }
    },
    selectAllEvent(e) {
      this.selectData = e.records;

    },
    selectChangeEvent(e) {
      this.selectData = e.records;

    },

    handleDel(row) {
      let order_number;
      if (row) {
        order_number = [row.order_number];
      } else {
        order_number = this.selectData.map(v => {
          return v.order_number;
        })
      }

      this.axios.post('/api/materialReturnDel', { order_number }).then(res => {
        if (res.code == 200) {
          this.$Message.success(res.msg);
          if ((this.gridOptions.data.length - order_number.length) == 0 && this.pageIndex != 1) {
            this.pageIndex--;
          }
          this.selectData = [];
          this.initData(this.proxyData);
        }
      })
    },
    handleSearch() {
      this.pageIndex = 1;
      this.proxyData = JSON.parse(JSON.stringify(this.searchData));
      this.proxyData.crt_time = [this.proxyData.crt_time[0] ? Date.parse(this.proxyData.crt_time[0]).toString().slice(0, 10) : '', this.proxyData.crt_time[1] ? Date.parse(this.proxyData.crt_time[1]).toString().slice(0, 10) : '']
      this.initData(this.proxyData);
    },
    initData(row) {
      this.axios.post('/api/materialReturnList', { ...row, page_size: this.pageSize, page_index: this.pageIndex }).then(res => {
        this.gridOptions.data = res.data.data;
        this.total = res.data.total;
      })
    },
    changePage(e) {
      this.pageIndex = e;
      this.initData(this.proxyData);
    },
    changeSize(e) {
      this.pageSize = e;
      this.pageIndex = 1;
      this.initData(this.proxyData);
    },
  }
}
</script>
<style lang="scss" scoped>
.form_item {
  margin-bottom: 15px !important;
}
.table_content {
  height: calc(100% - 250px);
}
</style>