zhonghan2.0/src/views/BusinessManagement/Picking/index.vue

<template>
  <div>
    <Toptitle>
      <template #left>
        <Button type="primary" @click="is_open = !is_open">{{
          is_open ? "收缩" : "展开"
        }}</Button>
      </template>
      <template #right>
        <Button type="warning" ghost @click="handleExport">导出</Button>
        <Dropdown style="margin-left: 10px" @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;overflow:auto'
          : '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
            transfer
            type="daterange"
            style="width: 200px"
            placeholder="年/月/日"
          />
        </FormItem>
        <FormItem label="发货日期">
          <DatePicker
              v-model="searchData.send_time"
              clearable
              transfer
              type="daterange"
              style="width: 200px"
              placeholder="年/月/日"
          />
        </FormItem>
        <FormItem label="账套标识">
         <Select transfer clearable style="width: 200px" v-model="searchData.roll_film_type_name">
           <Option value="太阳膜" label="太阳膜"/>
           <Option value="漆面膜" label="漆面膜"/>
         </Select>
        </FormItem>
        <FormItem label="所属区域">
          <Select
              v-model="searchData.area"
              filterable
              clearable
              style="width: 200px"
              transfer
          >
            <Option
                v-for="item in areaList"
                :key="item.id"
                :value="item.id"
                :label="item.title"
            />
          </Select>
        </FormItem>
        <FormItem label="要货单位">
          <Input
              v-model="searchData.employee"
              clearable
              style="width: 200px"
              placeholder="请输入"
          />
        </FormItem>
        <FormItem label="是否过桥">
          <Select transfer clearable style="width: 200px" v-model="searchData.bz">
            <Option :value="0" label="否"/>
            <Option :value="1" label="是"/>
          </Select>
        </FormItem>
        <FormItem label="所属集团">
          <Select
            v-model="searchData.company_id"
            filterable
            clearable
            style="width: 200px"
            transfer
          >
            <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.storehouse_id"
              style="width: 200px"
          >
            <Option
                v-for="item in storehouseList"
                :key="item.id"
                :value="item.id"
                :label="item.title"
            />
          </Select>
        </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="卷膜编号">
          <Input
              v-model="searchData.roll_film_number"
              clearable
              style="width: 200px"
              placeholder="请输入"
          />
        </FormItem>
        <FormItem label="卷膜型号" class="item">
          <Input
              v-model="searchData.roll_film_title"
              clearable
              placeholder="请输入"
              style="width: 200px"
          />
        </FormItem>
        <FormItem label="收货审核日期">
          <DatePicker
              v-model="searchData.upd_time"
              clearable
              transfer
              type="daterange"
              style="width: 200px"
              placeholder="年/月/日"
          />
        </FormItem>
        <FormItem label="申领状态">
          <Select filterable clearable style="width: 200px" v-model="searchData.apply_status" transfer>
            <Option :value="0" label="未审核"/>
            <Option :value="1" label="待审核"/>
            <Option :value="2" label="审核通过"/>
          </Select>
        </FormItem>
        <FormItem label="发货状态">
          <Select filterable clearable style="width: 200px" v-model="searchData.send_status" transfer>
            <Option :value="0" label="未审核"/>
            <Option :value="1" label="待审核"/>
            <Option :value="2" label="已发货"/>
          </Select>
        </FormItem>
        <FormItem label="收货状态">
          <Select filterable clearable style="width: 200px" v-model="searchData.take_status" transfer>
            <Option :value="0" label="未审核"/>
            <Option :value="1" label="待审核"/>
            <Option :value="2" label="已收货"/>
          </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>
    <Modal width="400" title="领料单过桥" :closable="true" :mask-closable="true" v-model="showGuo" draggable>
      <Form :label-width="100">
        <FormItem label="过桥时间:">
          <DatePicker
              v-model="time"
              clearable
              type="datetime"
              format="yyyy-MM-dd HH:mm:ss"
              style="width: 200px"
              transfer
              placeholder="年/月/日"
          />
        </FormItem>
      </Form>
      <div slot="footer">
        <Button style="margin-right: 10px;" @click="showGuo=false">取消</Button>
        <Button type="primary" ghost @click="handleSureGuo">确认</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
export default {
  data() {
    return {
      showGuo:false,
      time:'',
      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: 'company_name', title: '所属集团', showHeaderOverflow: true, minWidth: 100 },
          { field: 'four_shop_name', title: '4s店名称', showHeaderOverflow: true, minWidth: 100 },
          { field: 'regional_manager_name', title: '区域经理', showHeaderOverflow: true, minWidth: 100 },
          { field: 'bz', title: '是否过桥', showHeaderOverflow: true, minWidth: 100,slots: {default: (params,h)=>{
                const {row} = params;
                return h('span',{},row.bz?'是':'否')
              }} },
          { field: 'crt_name', title: '提交人', showHeaderOverflow: true, minWidth: 100 },
          { field: 'apply_name', title: '申领人', showHeaderOverflow: true, minWidth: 100 },
          // { field: 'default_num', title: '申领审核人', showHeaderOverflow: true, minWidth: 100 },
          { field: 'send_name', title: '发货人', showHeaderOverflow: true, minWidth: 100 },
          // { field: 'warranty_day', title: '发货审核人', showHeaderOverflow: true, minWidth: 100 },
          { field: 'take', title: '收货人', showHeaderOverflow: true, minWidth: 100 },
          { field: 'apply_status_name', title: '申领状态', showHeaderOverflow: true, minWidth: 100 },
          { field: 'send_status_name', title: '发货状态', showHeaderOverflow: true, minWidth: 100 },
          { field: 'take_status_name', title: '收货状态', showHeaderOverflow: true, minWidth: 100 },
          // { field: 'warranty_day', title: '收货审核人', showHeaderOverflow: true, minWidth: 100 }
        ],
        data: []
      },
      fourShopList: [],
      storehouseList:[],
      companyList: [],
      areaList:[]
    }
  },
  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/storehouseList').then(res => {
      this.storehouseList = res.data.data;
    })
    //获取区域
    this.axios.post('/api/areaList').then(res => {
      this.areaList = this.getArr(res.data);
    })
  },
  mounted() {
    this.initData();
  },
  methods: {
    handleSureGuo(){
      let time = this.time?Date.parse(new Date(this.time)).toString().slice(0,10):''
      this.$Modal.confirm({
        title:'确认',
        content:"确认过桥？",
        onOk:()=>{
          this.axios.post('/api/thirdMaterial',{id:this.selectData.map(v=>v.id),time}).then(res=>{
            if(res.code==200){
              this.$Message.success(res.msg);
              this.initData(this.proxyData);
              this.selectData = [];
            }
          })
        }
      })
    },
    getArr(arr) {
      let data = [];
      arr.forEach(ele => {

        if (ele.children.length != 0) {
          data = [...data, ...this.getArr(ele.children)];
        } else {
          data.push(ele);
        }
      });
      return data;
    },
   async handleExport(){
      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:1,id})
      if(res.code === 200){
        let url = `${this.$store.state.ip}/api/getExport/${res.data.file}`
        location.href = url
      }
    },
    handleSet(num, row) {
      switch (num) {
        case 1://新增
          this.$router.push({ path: '/cms/BusinessManagement/Picking/detail', query: { type: 1, title: "新增领料单" } })
          break;
        case 2://编辑
          this.$router.push({ path: '/cms/BusinessManagement/Picking/detail', query: { type: 2, title: '编辑领料单', order_number: row.order_number } })
          break;
        case 3://详情
          this.$router.push({ path: '/cms/BusinessManagement/Picking/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();
      }else if (name == 3){
        if (this.selectData.length == 0) {
          return this.$Message.warning('请选择数据！')
        }
       this.showGuo = true;
        this.time = this.func.replaceDate(this.selectData[0].upd_time);
      }
    },
    selectAllEvent(e) {
      this.selectData = e.records;

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

    },

    handleDel(row) {
      this.$Modal.confirm({
        title:'删除',
        content:'确认删除嘛？',
        onOk:()=>{
          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/materialOrderDel', { 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])+86400000-1).toString().slice(0, 10) : '']
      this.proxyData.send_time = [this.proxyData.send_time[0] ? Date.parse(this.proxyData.send_time[0]).toString().slice(0, 10) : '', this.proxyData.send_time[1] ? (Date.parse(this.proxyData.send_time[1])+86400000-1).toString().slice(0, 10) : '']
      this.proxyData.upd_time = [this.proxyData.upd_time[0] ? Date.parse(this.proxyData.upd_time[0]).toString().slice(0, 10) : '', this.proxyData.upd_time[1] ? (Date.parse(this.proxyData.upd_time[1])+86400000-1).toString().slice(0, 10) : '']
      this.initData(this.proxyData);
    },
    initData(row) {
      this.axios.post('/api/materialOrderList', { ...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% - 150px);
}
</style>