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

<template>
  <div>

    <div ref="lxHeader">
      <lx-header icon="md-apps"  :text="$route.meta.title" 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>
              <el-input v-model="select.wzbm" style="width: 120px;margin-right: 10px;" placeholder="种类编码搜索" />
            </div> -->
            <div class="selector-item">
              <el-input v-model="select.keyword" style="width: 120px;margin-right: 10px;" placeholder="物资名称搜索" />
            </div>
            <div class="selector-item">
              <el-cascader v-model="select.fenlei" placeholder="请选择所属种类" ref="cascaders" clearable popper-class="select_popper"
                        style="margin-right: 10px;flex-basis: 20%;" :options="fenleiList" :props="{label:'name',value:'id'}"
                        @change="(e)=>{changeFenlei(e)}" />
            </div>
            <div class="selector-item">
              <el-select clearable v-model="select.suozaicangku" style="width:100%" placeholder="请选择所在仓库">
                  <el-option v-for="item in cangkuList" :key="item.id" :label="item.cangkumingcheng" :value="item.id" />
              </el-select>
            </div>
            <div class="selector-item">
              <el-date-picker type="daterange"
              range-separator="至"
              start-placeholder="入库日期开始"
              end-placeholder="入库日期结束"
              format="yyyy-MM-dd" value-format="yyyy-MM-dd" v-model="select.rukuriqi"></el-date-picker>
            </div>
            <div class="selector-item">
              <el-date-picker format="yyyy-MM-dd"
               type="daterange"
                     range-separator="至"
                     start-placeholder="生产日期开始"
                     end-placeholder="生产日期结束"
               value-format="yyyy-MM-dd" v-model="select.shengchanriqi"></el-date-picker>
            </div>
            <div class="selector-item">
              <el-select clearable v-model="select.wuzizhuangtai" style="width:100%" placeholder="请选择物资状态">
                <el-option v-for="item in paraOptions.materials_status" :key="item.id" :label="item.value"
                  :value="item.id" />
              </el-select>
            </div>
            <div class="selector-item">
              <el-select clearable v-model="select.chanquanxinxi" style="width:100%" placeholder="请选择产权信息">
                <el-option v-for="item in paraOptions.materials_property" :key="item.id" :label="item.value"
                  :value="item.id" />
              </el-select>
            </div>
            <div class="selector-item">
              <el-select clearable v-model="select.chubeifangshi" style="width:100%" placeholder="请选择储备方式">
                <el-option v-for="item in paraOptions.material_reserve" :key="item.id" :label="item.value"
                  :value="item.id" />
              </el-select>
            </div>
            <div class="selector-item">
              <el-select clearable v-model="select.dengjifenlei" style="width:100%" placeholder="请选择等级分类">
                <el-option v-for="item in paraOptions.materials_level" :key="item.id" :label="item.value"
                  :value="item.id" />
              </el-select>
            </div>
            <!-- <div class="selector-item">
              <span class="selector-item__label">入库数量：</span>
              <Input v-model="select.rmin" clearable style="width: 60px;margin:0 3px" placeholder="" />
              <span class="selector-item__label">～</span>
              <Input v-model="select.rmax" clearable style="width: 60px;margin:0 3px" placeholder="" />
            </div>
            <div class="selector-item">
              <span class="selector-item__label">在库数量：</span>
              <Input v-model="select.min" clearable style="width: 60px;margin:0 3px" placeholder="" />
              <span class="selector-item__label">～</span>
              <Input v-model="select.max" clearable style="width: 60px;margin:0 3px" placeholder="" />
            </div> -->
            <div>
              <el-button  type="primary" style="margin-left: 10px;" @click="getindex">查询</el-button>
              <el-button  type="primary" style="margin-left: 10px;" @click="toprint">打印</el-button>
              <el-button  type="primary" style="margin-left: 10px;"
                @click="exportExcel(new Date().getTime().toString())">导出</el-button>
            </div>
          </div>
        </slot>
      </lx-header>
    </div>

    <xy-table v-loading="loading" :pageSize="select.pageSize" :pageIndex="select.pageIndex" :span-method="objectSpanMethod" :list="list" :total="total" :table-item="table"
      :auths="[]" @selection-change="selectionChange" @pageSizeChange="pageSizeChange" @pageIndexChange="pageChange">
      <!-- <template v-slot:caigouhetong>
       <el-table-column  align="left" label="采购合同" width="240" header-align="center">
          <template slot-scope="scope">
            <template v-if="scope.row.stocks && scope.row.stocks.length>0">
              <div v-for="item in scope.row.stocks">{{item.caigouhetong}}</div>
            </template>
          </template>
        </el-table-column>
     </template> -->


      <template v-slot:btns>
        <!-- <div></div> isPandian==='pandian' &&  -->
        <el-table-column v-if="(isCkName=='仓库管理员'||roleName=='系统管理员')" fixed="right"
          align="center" label="操作" width="120" header-align="center">
          <template slot-scope="scope">
            <!-- <Button type="primary" size="small" @click="editorIn(scope.row.id,'editor')">盘点</Button> -->
            <Button type="primary" size="small" @click="editorStocks(scope.row.id)">编辑明细</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>
        <div v-else />
      </template>

    </xy-table>

    <addInventorys ref="addInventorys" @refresh="getindex" />
    <div v-if="showcode" class="code" @click="closeCode">
      <div id="qrCode" ref="qrCodeDiv" />
    </div>
    <editStockItem ref="editStockItem"  @refresh="getindex"></editStockItem>
    <imports ref="imports" :table-name="customForm.tableName" :form-info="form" @refresh="getindex" />

  </div>
</template>

<script>
  import {
    index,
    destroy,
    save
  } from '@/api/inventory.js'
  import {
    index as getFenleilist
  } from '@/api/fenlei.js'
  import {
    index as baseFormIndex
  } from '@/api/system/baseForm.js'
  import {
    getInfo
  } from '@/api/user.js'
  import addInventorys from './components/addInventorys.vue'
  import editStockItem from './components/editStockItem.vue'
  import QRCode from 'qrcodejs2'
  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'
  import {
    getparameteritemMore
  } from '@/api/system/dictionary.js'
  import {
    download
  } from "@/utils/downloadRequest";

  export default {
    components: {
      imports,
      addInventorys,
      editStockItem
    },
    data() {
      return {
        loading: false,
        userName: '',
        authName: '',
        roleName: '',
        isCkName: '',
        isPandian: '',
        fenleiList:[],
        cangkuList:[],
        paraOptions: {
          'materials_status': [],
          'material_reserve': [],
          'materials_property': [],
          'materials_level': []

          // 'materials_fenlei':[],
        },
        select: {
          pageSize: 40,
          pageIndex: 1,
          keyword: '',
          wzbm: '',
          fenlei:'',
          is_export: 0,
          wuzizhuangtai:'',
          chanquanxinxi:'',
          chubeifangshi:'',
          suozaicangku:'',
          rukuriqi:'',
          shengchanriqi:'',
          dengjifenlei:'',
          min: '',
          max: '',
          rmin: '',
          rmax: ''
        },
        showcode: false,
        customForm: {
          customFormId: '',
          tableName: 'inventorys'
        },
        form: [],
        total: 0,
        list: [],
        spanArr: [], // 存储合并规则的数组
        position: 0, // 记录当前合并的起始位置
        table: [{
            type: 'selection',
            fixed: 'left'
          },
          {
            label: '物资信息',
            align: 'left',
            prop: 'wuzibianma_material_infos_wuzibianma_relation',
            multiHd: [
              {
                label: '一级分类',
                width: 120,
                prop: 'wuzibianma_material_infos_wuzibianma_relation.material_info_type',
                align: 'center',
                formatter: (cell, data, value) => {
                  return value ? value.split("-")[0] : ''
                }
              },
              {
                label: '二级分类',
                width: 120,
                prop: 'wuzibianma_material_infos_wuzibianma_relation.material_info_type',
                align: 'center',
                formatter: (cell, data, value) => {
                  return value ? (value.split("-").length>1?value.split("-")[1]:value.split("-")[0]) : ''
                }
              },
              {
                label: '所属种类',
                width: 120,
                prop: 'wuzibianma_material_infos_wuzibianma_relation.fenlei_detail.name',
                align: 'center'
              },{
                label: '物资名称',
                prop: 'zichanmingcheng',
                align: 'center',
                width: 180,
                fixed: 'left'
              },
              // {
              //   label: '种类编码',
              //   width: 120,
              //   prop: 'wuzibianma',
              //   align: 'center'
              // },
              {
                label: '物资类型',
                width: 120,
                prop: 'wuzileixing',
                align: 'center'
              },

              {
                label: '物资型号',
                prop: 'wuzibianma_material_infos_wuzibianma_relation.guigexinghao',
                align: 'center',
                width: 180
              },
              {
                label: '物资规格',
                prop: 'wuzibianma_material_infos_wuzibianma_relation.wuziguige',
                align: 'center',
                width: 180
              },
              {
                label: '单位',
                width: 120,
                prop: 'wuzibianma_material_infos_wuzibianma_relation.jiliangdanwei',
                align: 'center'
              }
            ]
          },
          {
            label: '库存信息',
            prop: 'kucun',
            align: 'left',
            multiHd: [{
                label: '在库数量',
                width: 120,
                prop: 'zaikushuliang',
                customFn: (row) => {
                  return (<span>{row.row.zaikushuliang}{row.row.jiliangdanwei?row.row.jiliangdanwei:''}</span>)
                }
              },{
                label: '原库存数量',
                width: 120,
                prop: 'chushishuliang',
                customFn: (row) => {
                  return (<span>{row.row.chushishuliang}{row.row.jiliangdanwei?row.row.jiliangdanwei:''}</span>)
                }
              },{
                label: '入库批次',
                width: 120,
                prop: 'rukupici'
              },
              {
                label: '顺序号',
                width: 180,
                prop: 'shunxuhao',
                customFn: (row) => {
                  return (<span>{row.row.shunxuhao?row.row.shunxuhao:''}</span>)
                }
              },

              {
                label: '待出库',
                width: 120,
                prop: 'wait_num'
              },
              ]
            },
            {
              label: '物资明细',
              prop: 'stocks_items_info',
              align: 'left',
              multiHd: [{
                  label: '生产日期',
                  width: 120,
                  prop: 'shengchanriqi'
                },
                {
                  label: '入库日期',
                  width: 120,
                  prop: 'rukuriqi'
                },
                {
                  label: '物资状态',
                  width: 120,
                  prop: 'wuzizhuangtai_detail.value'
                },
                {
                  label: '储备方式',
                  width: 120,
                  prop: 'chubeifangshi_detail.value'
                },
                {
                  label: '所在仓库',
                  width: 120,
                  prop: 'materialstorages.cangkumingcheng'
                },
                {
                  label: '所在货架',
                  width: 120,
                  prop: 'shelfs.huojiamingcheng'
                },
                {
                  label: '所在货架层',
                  width: 120,
                  prop: 'huojiaceng'
                },
                {
                  label: '等级分类',
                  width: 120,
                  prop: 'dengjifenlei_detail.value'
                },
                {
                  label: '产权信息',
                  width: 120,
                  prop: 'chanquanxinxi_detail.value'
                },{
                label: '是否为固定资产',
                width: 120,
                prop: 'shifouweigudingzichan',
              },{
                label: '固定资产编码',
                width: 120,
                prop: 'gudingzichanbianma',
              }, {
                label: '储备年限',
                width: 120,
                prop: 'chubeinianxian'
              }, {
                label: '存放要求',
                width: 120,
                prop: 'cunfangyaoqiu'
              },

              {
                label: '维护要求',
                width: 120,
                prop: 'weihuyaoqiu'
              },
              {
                label: '保养频次',
                width: 120,
                prop: 'equipment_maintain_config.name'
              }]
            }

          ],
          printObj: [],
          printArr: [],
          // 定义需要合并的列索引范围（从selection列开始计数）
          mergeColumnRange: {
            start: 1, // 基础信息分组的起始列索引
            end: 8 // 基础信息分组的结束列索引
          }
        }
      },
      mounted() {
          if (this.$route.path) {
            const path = this.$route.path.split('_')
            if (path[1]) {
              this.isPandian = 'pandian'
            }
          }
          this.getFenlei()
          this.getField()
          this.getCangku()
          this.getindex()
          this.getUserName()
          this.getData()
        },
        methods: {
          async updateGd(id,value){
            const res = await save({
              id:id,
              'shifouweigudingzichan':value
            })
            Message({
              type: 'success',
              message: '更新成功'
            })
            this.getindex()
          },

          async updateGdbm(id,value){
            const res = await save({
              id:id,
              'gudingzichanbianma':value
            })
            Message({
              type: 'success',
              message: '更新成功'
            })
            this.getindex()
          },
          // 获取仓库
          async getCangku() {
            const res = await baseFormIndex({
              page_size: 999,
              page: 1,
              table_name: 'materialstorages',
              sort_name: 'sort',
              sort_type: 'ASC',
              filter: [{
                key: 'shifouzili',
                op: 'eq',
                value: '是'
              }]
            })
            this.cangkuList = res.data
          },
          // 获取数据字典
          async getData() {
            const res = await getparameteritemMore({
              'number[0]': 'materials_status', // 物资状态
              'number[1]': 'material_reserve', // 储备方式
              'number[2]': 'materials_property', // 产权信息
              'number[3]': 'materials_level' // 等级分类
              // 'number[4]':'materials_fenlei', //所属种类
            })
            for (var k in this.paraOptions) {
              res.map(item => {
                if (item.number === k) {
                  this.paraOptions[k] = item.detail
                }
              })
            }
            console.log(this.paraOptions)
          },
          // filterSpans
          getSpanArr(data) {
            // 生成合并规则数组（保持不变）
            this.spanArr = []
            this.position = 0

            data.forEach((item, index) => {
              if (index === 0) {
                this.spanArr.push(1)
                this.position = 0
              } else {
                if (item.wuzibianma === data[this.position].wuzibianma_material_infos_wuzibianma_relation.wuzibianma) {
                  this.spanArr[this.position] += 1
                  this.spanArr.push(0)
                } else {
                  this.spanArr.push(1)
                  this.position = index
                }
              }
            })
          },
          objectSpanMethod({
            row,
            column,
            rowIndex,
            columnIndex
          }) {
            // 通过列索引范围判断是否需要合并
            if (columnIndex >= this.mergeColumnRange.start && columnIndex <= this.mergeColumnRange.end) {
              const _row = this.spanArr[rowIndex]
              const _col = _row > 0 ? 1 : 0
              return {
                rowspan: _row,
                colspan: _col
              }
            }
            // 其他列保持默认
            return {
              rowspan: 1,
              colspan: 1
            }
          },
          handleDataChange() {
            this.getSpanArr(this.list)
          },
          async getUserName() {
            getInfo().then(res => {
              console.log('res', res)
              this.userName = res.username
              this.authName = res.name
              for (var k of res.role) {
                if (k.name == '系统管理员') {
                  this.roleName = k.name
                }
                if (k.name == '仓库管理员') {
                  this.isCkName = '仓库管理员'
                }
              }
            }).catch(error => {})
          },
          selectionChange(e) {
            console.log(e)
            const _arrs = []
            if (e.length > 0) {
              for (var m of e) {
                _arrs.push(m.id)
              }
              console.log(_arrs)
              // this.printObj = e
              this.printArr = _arrs.join(',')
            }
          },
          toprint() {
            if (this.printArr.length < 1) {
              Message({
                type: 'warning',
                message: '请先选择'
              })
              return
            }
            // let _obj = JSON.parse(JSON.stringify(this.printObj))
            // let _objs = []
            // for(var m of this.printObj){
            //   _objs.push({
            //     'wuzibianma':encodeURI(encodeURI(m['wuzibianma'])),
            //     'zichanmingcheng':encodeURI(encodeURI(m['zichanmingcheng'])),
            //     'wuzileixing':encodeURI(encodeURI(m['wuzileixing']))
            //   })
            // }
            // Cookies.remove('objs')
            // Cookies.set('objs',JSON.stringify(_objs))
            window.open('/admin/#/myprint?ids=' + this.printArr, '_blank')
          },
          async exportExcel(sheetName) {
            
            const params = {
              page: 1,
              page_size: 9999,
              table_name: 'inventorys',
              is_export: 1,
              sort_type: 'DESC',
              sort_name: 'wuzibianma',
              fenlei:this.select.fenlei,
              wuzizhuangtai:this.select.wuzizhuangtai,
              chanquanxinxi:this.select.chanquanxinxi,
              chubeifangshi:this.select.chubeifangshi,
              suozaicangku:this.select.suozaicangku,
              start_rukuriqi:this.select.rukuriqi?this.select.rukuriqi[0]:'',
              end_rukuriqi:this.select.rukuriqi?this.select.rukuriqi[1]:'',
              start_shengchanriqi:this.select.shengchanriqi?this.select.shengchanriqi[0]:'',
              end_shengchanriqi:this.select.shengchanriqi?this.select.shengchanriqi[1]:'',
              // shengchanriqi:this.select.shengchanriqi?this.select.shengchanriqi.join(","):'',
              dengjifenlei:this.select.dengjifenlei,
              filter: [
                /* {
                  'key': 'wuzibianma',
                  'op': 'like',
                  'value': this.select.wzbm
                }, */
                {
                  'key': 'zichanmingcheng',
                  'op': 'like',
                  'value': this.select.keyword
                },
                // {
                //   'key': 'rukushuliang',
                //   'op': 'range',
                //   'value': rmin + ',' + rmax
                // },
                // {
                //   'key': 'zaikushuliang',
                //   'op': 'range',
                //   'value': min + ',' + max
                // }
              ],
              "export_fields[wuzibianma]": '物资编码',
              "export_fields[wuzibianma_material_infos_wuzibianma_relation.material_info_type]": '一级分类',
              "export_fields[wuzibianma_material_infos_wuzibianma_relation.material_info_type]": '二级分类',
              "export_fields[wuzibianma_material_infos_wuzibianma_relation.fenlei_detail.name]": '所属种类',
              "export_fields[zichanmingcheng]": '物资名称',
              "export_fields[wuzileixing]": '物资类型',
              "export_fields[guigexinghao]": '物资型号',
              "export_fields[wuziguige]": '物资规格',
              "export_fields[wuzibianma_material_infos_wuzibianma_relation.jiliangdanwei]": '单位',
              "export_fields[rukupici]": '入库批次',
              "export_fields[zaikushuliang]": '在库数量',
              "export_fields[shunxuhao]": '顺序号', 
              "export_fields[wuzizhuangtai_detail.value]": '物资状态',
              "export_fields[chubeifangshi_detail.value]": '储备方式',
              "export_fields[materialstorages.cangkumingcheng]": '所在仓库',
              "export_fields[shelfs.huojiamingcheng]": '所在货架',
              "export_fields[huojiaceng]": '所在货架层',
              "export_fields[dengjifenlei_detail.value]": '等级分类',
              "export_fields[chanquanxinxi_detail.value]": '产权信息',
              "export_fields[shifouweigudingzichan]": '是否为固定资产',
              "export_fields[gudingzichanbianma]": '固定资产编码',
              "export_fields[chubeinnianxian]": '储备年限',
              "export_fields[cunfangyaoqiu]": '存放要求',
              "export_fields[weihuyaoqiu]": '维护要求',
              "export_fields[equipment_maintain_configs_id_relation.name]": '保养频次',
            
            }
            download(
        '/api/admin/inventory/index',
        'get', params,
        `自管物资${sheetName}.xlsx`)
          },
          showCode(e, row) {
            console.log(e, row)
            this.showcode = true
            this.$nextTick(function() {
              new QRCode(this.$refs.qrCodeDiv, {
                text: row.wuzibianma + '-' + row.id,
                width: 200,
                height: 200,
                colorDark: '#333333', // 二维码颜色
                colorLight: '#ffffff', // 二维码背景色
                correctLevel: QRCode.CorrectLevel.L // 容错率，L/M/H
              })
            })
          },
          closeCode() {
            this.$refs.qrCodeDiv.innerHTML = ''
            this.showcode = false
          },
          search() {
            this.select.pageIndex = 1
            this.getindex()
          },
          async getFenlei() {
            const res = await getFenleilist({
              tree: 1,
              sort_type:'ASC',
              sort_name:'sort'
            })
            this.fenleiList = this.removeEmptyChildren(res)
          },
          changeFenlei(e, row) {
            console.log('e', e)
            if (e) {
              this.select.fenlei = e[e.length - 1]
            } else {
              this.select.fenlei = ''
            }
          },
          // 移除children=[]
          removeEmptyChildren(node) {
            if (Array.isArray(node)) {
              return node.map(child => {
                if (child.children) {
                  // 递归处理子节点
                  child.children = this.removeEmptyChildren(child.children);
                  // 若处理后 children 为空，删除该属性
                  if (child.children.length === 0) {
                    delete child.children;
                  }
                }
                return child;
              });
            }
            return [];
          },
          async getindex() {
            this.loading = true
            const min = this.select.min ? this.select.min : 0
            const max = this.select.max ? this.select.max : 99999
            const rmin = this.select.rmin ? this.select.rmin : 0
            const rmax = this.select.rmax ? this.select.rmax : 99999
            const res = await index({
              page_size: this.select.pageSize,
              page: this.select.pageIndex,
              table_name: 'inventorys',
              sort_type: 'DESC',
              sort_name: 'wuzibianma',
              fenlei:this.select.fenlei,
              wuzizhuangtai:this.select.wuzizhuangtai,
              chanquanxinxi:this.select.chanquanxinxi,
              chubeifangshi:this.select.chubeifangshi,
              suozaicangku:this.select.suozaicangku,
              start_rukuriqi:this.select.rukuriqi?this.select.rukuriqi[0]:'',
              end_rukuriqi:this.select.rukuriqi?this.select.rukuriqi[1]:'',
              start_shengchanriqi:this.select.shengchanriqi?this.select.shengchanriqi[0]:'',
              end_shengchanriqi:this.select.shengchanriqi?this.select.shengchanriqi[1]:'',
              // shengchanriqi:this.select.shengchanriqi?this.select.shengchanriqi.join(","):'',
              dengjifenlei:this.select.dengjifenlei,
              // is_export:this.select.is_export,
              filter: [
                /* {
                  'key': 'wuzibianma',
                  'op': 'like',
                  'value': this.select.wzbm
                }, */
                {
                  'key': 'zichanmingcheng',
                  'op': 'like',
                  'value': this.select.keyword
                },
                // {
                //   'key': 'rukushuliang',
                //   'op': 'range',
                //   'value': rmin + ',' + rmax
                // },
                // {
                //   'key': 'zaikushuliang',
                //   'op': 'range',
                //   'value': min + ',' + max
                // }
              ]
            })
            // 筛选出 入库批次
            // let stocks_items_arr = []
            // res.list.data.map(item => {
            //   stocks_items_arr = item.stocks_items.filter(f => f.id === item.stocks_item_id)
            //   console.log("stocks_items_arr",stocks_items_arr)
            //   item.stocks_items_info = stocks_items_arr.length > 0 ? stocks_items_arr[0] : {},
            //   console.log("item.stocks_items_info",item.stocks_items_info)
            // })

            this.list = res.list.data
            this.total = res.list.total
            this.loading = false
            this.handleDataChange()
          },
          pageSizeChange(e) {
            this.select.pageSize = e
            this.getindex()
          },
          pageChange(e) {
            this.select.pageIndex = e
            this.getindex()
          },
          editorIn(id, type) {
            this.$refs['addInventorys'].id = id
            this.$refs['addInventorys'].isShow = true
            this.$refs['addInventorys'].type = type
          },
          editorStocks(id){
            this.$refs['editStockItem'].id = id
            this.$refs['editStockItem'].isShowMingxi = true
          },
          deleteIn(row) {
            console.log(row.id)
            // return
            destroy({
              id: row.id,
              table_name: this.customForm.tableName
            }).then(res => {
              Message({
                type: 'success',
                message: '删除成功'
              })
              this.getindex()
            })
          },
          async getField() {
            if (this.$route.meta.params?.custom_form) {
              const decode = decodeURIComponent(this.$route.meta.params?.custom_form)
              try {
                const 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
            this.form = res.data
              ?.filter((i) => i.list_show)
              .map((i) => {
                return i
              })
            console.log(this.form)
          }
        }

    }
</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
  }
  .selector-item{
    margin-right:10px;
    margin-bottom:5px;
  }
  #qrCode {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
</style>