patrol-wzgl-web/src/views/inventorys/outbounds.vue

<template>
  <div>

    <div ref="lxHeader">
      <lx-header icon="md-apps" text="出库明细" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
        <slot>
          <div style="display: flex;justify-content: flex-start;flex-wrap: wrap;">
           <div class="selector-item">
              <span class="selector-item__label">物资编码：</span>
              <Input v-model="select.wzbm" style="width: 120px;margin-right: 10px;" placeholder="物资编码搜索" />
            </div>
            <div class="selector-item">
              <span class="selector-item__label">资产名称：</span>
              <Input v-model="select.keyword" style="width: 120px;margin-right: 10px;" placeholder="资产名称搜索" />
            </div>
            <DatePicker @on-change="changeDate" type="daterange" split-panels placeholder="请选择日期" style="width: 200px"></DatePicker>
            <Button type="primary" style="margin-left: 10px;" @click="getindex">查询</Button>
            <Button type="primary" style="margin-left: 10px;"
              @click="exportExcel(new Date().getTime().toString())">导出</Button>


          </div>
        </slot>
      </lx-header>
    </div>

    <xy-table :list="list" v-loading="loading" :total="total"
      @pageSizeChange="e => select.pageSize = e" @pageIndexChange="pageChange" :table-item="table" :auths='[]'>
     <template v-slot:btns >
        <div></div>
      <!-- <el-table-column v-if="isCkName=='仓库管理员'||roleName=='系统管理员'" fixed="right" label="操作" width="180" header-align="center">
          <template slot-scope="scope">
            <Button type="primary" size="small" @click="editorIn(scope.row.id,'editor')">编辑</Button>
            <Poptip transfer confirm title="确认要删除吗？" @on-ok="deleteIn(scope.row)">
              <Button type="primary" style="margin-left: 10px;" size="small" ghost>删除</Button>
            </Poptip>
          </template>
        </el-table-column> -->
      </template>

    </xy-table>



    <imports :table-name="customForm.tableName" :form-info="form" ref="imports" @refresh="getindex"></imports>

  </div>
</template>

<script>
  import {
    index,
    destroy
  } from "@/api/system/baseForm.js"
  import {
    Message
  } from 'element-ui'
  import imports from "@/views/component/imports.vue"
  import {
    index as fieldIndex
  } from "@/api/system/customFormField";
  import {
    getparameter
  } from "@/api/system/dictionary";
  import * as XLSX from "xlsx";
  import {
    saveAs
  } from "file-saver";
  import Cookies from 'js-cookie'
  export default {
    components: {
      imports
    },
    data() {
      return {
        loading: false,
        select: {
          pageSize: 10,
          pageIndex: 1,
          keyword: "",
          wzbm:'',
          // is_export: 0,
        },
        showcode: false,
        customForm: {
          customFormId: 10,
          tableName: "outbounds_items"
        },
        form: [],
        total: 0,
        list: [],
        dateRanges:'',
        table: [{
            label: '序号',
            type: 'index',
            fixed: 'left',
            width: 80,
          },
          {
            label: '出库时间',
            prop:'outbounds_chukushijian',
            width: 180,
          },
          {
            label: '出库类型',
            prop:'outbounds_chukuleixing',
            width: 180,
          },
          {
            label: '出库状态',
            prop:'outbounds_zhuangtai',
            width: 180,
          },
          {
            label: '借用仓库',
            prop:'outbounds_jieyongcangku',
            width: 180,
          },
          {
            label: '借用部门',
            prop:'outbounds_jieyongbumen',
            width: 180,
          },
          {
            label: '经办人',
            prop:'outbounds_jilurenyuan',
            width: 180,
          },
          {
            label: "物资编码",
            width: 180,
            prop: 'wuzibianma',
            align: 'center',
          },
          {
            label: "资产名称",
            prop: 'zichanmingcheng',
            align: 'center',

          },
          {
            label: "规格型号",
            prop: 'guigexinghao',
            align: 'center',
            width: 180,
          },
          {
            label: "物资类型",
            width: 120,
            prop: 'wuzileixing',
            align: 'center',
          },
          {
            label: "计量单位",
            width: 120,
            prop: 'jiliangdanwei',
            align: 'center',

          },
          {
            label: "入库批次",
            width: 120,
            prop: 'rukupici',
          },
          {
            label: "生产日期",
            width: 120,
            prop: 'shengchanriqi',
          },
          {
            label: "出库数量",
            width: 120,
            prop: 'jieyongshuliang',
          },
          {
            label: "备注",
            width: 180,
            prop: 'outbounds_beizhu',
          }
          // {
          //   label: "二维码",
          //   width: 180,
          //   prop: 'erweima',
          //   customFn: (row) => {
          //     return (<Button type='primary' size='small'
          //       on=
          //         {
          //           {
          //             ["click"]: (e) => (this.showCode(e, row))
          //           }
          //         }
          //     >生成二维码</Button>)
          //     }
          // },
        ]
      }
    },
    mounted() {
      // this.getField()
      this.getindex()
    },
    methods: {
      changeDate(e){
        console.log(e)
        if(e.length>0){
          if(e[0]){
            this.dateRanges = e.join(",")
          }else{
             this.dateRanges = ''
          }
        }else{
           this.dateRanges = ''
        }
      },
      async exportExcel(sheetName) {
        this.loading = true
        const res = await index(Object.assign('', {
          page_size: 99999,
          page: 1,
          table_name: this.customForm.tableName,
          range:this.dateRanges,
          // is_export:this.select.is_export,
          filter: [{
              "key": "wuzibianma",
              "op": "like",
              "value": this.select.wzbm,
            },{
              "key": "zichanmingcheng",
              "op": "like",
              "value": this.select.keyword,
            },
          ],
        }))
        if (res.data) {
          let headers = this.table.filter(f=>f.type!='index').map(i => {
            if(i.type!='index'){
              return {
                key: i.prop,
                title: i.label
              }
            }
          })
          for(var k of res.data){
            if(k.outbounds_id_outbounds_items_id_relation){
              k.outbounds_chukushijian = k.outbounds_id_outbounds_items_id_relation.chukushijian
              k.outbounds_chukuleixing = k.outbounds_id_outbounds_items_id_relation.chukuleixing
              k.outbounds_zhuangtai = k.outbounds_id_outbounds_items_id_relation.zhuangtai
              k.outbounds_jieyongbumen = k.outbounds_id_outbounds_items_id_relation.jieyongbumen
              k.outbounds_jieyongcangku = k.outbounds_id_outbounds_items_id_relation.jieyongcangku
              k.outbounds_jilurenyuan = k.outbounds_id_outbounds_items_id_relation.jilurenyuan
              k.outbounds_beizhu = k.outbounds_id_outbounds_items_id_relation.beizhu
            }
          }
          const data = res.data.map(row => headers.map(header => row[header.key]));
          data.unshift(headers.map(header => header.title));
          const wb = XLSX.utils.book_new();
          const ws = XLSX.utils.aoa_to_sheet(data);
          XLSX.utils.book_append_sheet(wb, ws, sheetName);
          const wbout = XLSX.write(wb, {
            bookType: 'xlsx',
            bookSST: true,
            type: 'array'
          });
          saveAs(new Blob([wbout], {
            type: 'application/octet-stream'
          }), `${sheetName}.xlsx`);
          this.loading = false
        }
      },
      async getindex() {
        this.loading = true
        const res = await index({
          page_size: this.select.pageSize,
          page: this.select.pageIndex,
          table_name: this.customForm.tableName,
          range:this.dateRanges,
          // is_export:this.select.is_export,
          filter: [{
              "key": "wuzibianma",
              "op": "like",
              "value": this.select.wzbm,
            },{
              "key": "zichanmingcheng",
              "op": "like",
              "value": this.select.keyword,
            },
          ],
        })
        for(var k of res.data){
          if(k.outbounds_id_outbounds_items_id_relation){
            k.outbounds_chukushijian = k.outbounds_id_outbounds_items_id_relation.chukushijian
            k.outbounds_chukuleixing = k.outbounds_id_outbounds_items_id_relation.chukuleixing
            k.outbounds_zhuangtai = k.outbounds_id_outbounds_items_id_relation.zhuangtai
            k.outbounds_jieyongbumen = k.outbounds_id_outbounds_items_id_relation.jieyongbumen
            k.outbounds_jieyongcangku = k.outbounds_id_outbounds_items_id_relation.jieyongcangku
            k.outbounds_jilurenyuan = k.outbounds_id_outbounds_items_id_relation.jilurenyuan
            k.outbounds_beizhu = k.outbounds_id_outbounds_items_id_relation.beizhu
          }
        }
        this.list = res.data
        this.total = res.total
        this.loading = false
      },

      pageChange(e) {
        this.select.pageIndex = e
        this.getindex()
      },

      async getField() {
        if (this.$route.meta.params?.custom_form) {
          let decode = decodeURIComponent(this.$route.meta.params?.custom_form)
          try {
            let custom_form = JSON.parse(decode)
            this.customForm.customFormId = custom_form.custom_form_id
            this.customForm.tableName = custom_form.table_name
            console.log("123", this.customForm)
            // this.select.table_name = custom_form.table_name
          } catch (err) {
            console.warn(err)
          }
        }
        const res = await fieldIndex({
          page: 1,
          page_size: 999,
          custom_form_id: this.customForm.customFormId,
          sort_name: 'sort',
          sort_type: 'asc',
        })
        if (res.data && res.data instanceof Array) {
          res.data.forEach(i => {
            if (i.field) {
              if (
                (i.edit_input === "checkbox" || i.edit_input === "radio" || i.edit_input === "select") &&
                i.parameter_id
              ) {
                getparameter({
                  id: i.parameter_id
                }).then((res) => {
                  i._paramters = res.detail ?? [];
                });
              }
              if (
                (i.edit_input === "checkbox" || i.edit_input === "radio" || i.edit_input === "select") &&
                i.link_table_name
              ) {
                index({
                  page: 1,
                  page_size: 999,
                  table_name: i.link_table_name,
                }).then((res) => {
                  i._paramters = res.data ?? [];
                });
              }
            }
          })
        }
        this.form = res.data
      },
    }

  }
</script>

<style scoped lang="scss">
  .code {
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
    z-index: 9999
  }

  #qrCode {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
</style>