zfire-newmall-admin/src/views/auxiliaryFittings/purchasingManagement/mixins/form_tpl.js

import ImageUpload from '@/components/file-upload'
export default {
  data() {
    return {
      // 事件组合
      optionsEvensGroup: [
        [
          [
            {
              name: '新建',
              isRole: true,
              click: this.addData
            }
          ],
        ],
      ],
      // 表格属性
      tableAttributes: {
        // 启用勾选列
        selectColumn: false
      },
      // 表格事件
      tableEvents: {
        'selection-change': this.selectionChange
      },
      recordSelected: [],
      formDialog: false,
      formDialogType: 0, // 0:新增, 1:编辑, 2:查看, 3:审核
      formDialogTitles: ['新增', '编辑', '查看', '审核'],
      pageType: this?.$route?.name,
    }
  },
  computed: {
    moreParameters() {
      return [
        {
          name: '状态',
          key: 'flag',
          value: '',
          conditions: [
            {
              label: `全部`,
              value: ''
            },
            {
              label: `已保存`,
              value: "SAVE"
            },
            {
              label: `已审核`,
              value: "OK"
            }, {
              label: `失败`,
              value: "FAIL"
            },
          ]
        },
      ]
    },
    columns() {
      return [
        ...(() => {
          if (!!~['auxiliaryMaterialsStorage', 'returnAuxiliaryMaterials'].indexOf(this.pageType)) {
            return [{
              columnAttributes: {
                label: '大类名称',
                prop: 'parentCategoryId',
              },
              render: (h, { row, column, index }) => {
                return (
                  row.isEditRow ?
                    <el-select value={row[column.prop]} onInput={(val) => { row[column.prop] = val }} placeholder="请选择">
                      {[].map((item, index_) => <el-option key={index_} label={item.label} value={item.value}></el-option>)}
                    </el-select> :
                    <div>{row[column.prop]}</div>
                )
              }
            }]
          }
          return []
        })(),
        ...(() => {
          if (!!~['auxiliaryMaterialsStorage', 'returnAuxiliaryMaterials'].indexOf(this.pageType)) {
            return [{
              columnAttributes: {
                label: '小类名称',
                prop: 'goodsCategoryId',
              },
              render: (h, { row, column, index }) => {
                return (
                  row.isEditRow ?
                    <el-select value={row[column.prop]} onInput={(val) => { row[column.prop] = val }} placeholder="请选择">
                      {[].map((item, index_) => <el-option key={index_} label={item.label} value={item.value}></el-option>)}
                    </el-select> :
                    <div>{row[column.prop]}</div>
                )
              }
            }]
          }
          return []
        })(),
        ...(() => {
          if (!!~['auxiliaryMaterialsStorage', 'returnAuxiliaryMaterials'].indexOf(this.pageType)) {
            return [{
              columnAttributes: {
                label: '辅材名称',
                prop: 'avatar',
              },
              render: (h, { row, column, index }) => {
                return (
                  row.isEditRow ?
                    <el-select value={row[column.prop]} onInput={(val) => { row[column.prop] = val }} placeholder="请选择">
                      {[].map((item, index_) => <el-option key={index_} label={item.label} value={item.value}></el-option>)}
                    </el-select> :
                    <div>{row[column.prop]}</div>
                )
              }
            }]
          }
          return []
        })(),
        ...(() => {
          if (!!~['partsStorage', 'partsReturn'].indexOf(this.pageType)) {
            return [{
              columnAttributes: {
                label: '配件名称',
                prop: 'avatar',
              },
              render: (h, { row, column, index }) => {
                return (
                  row.isEditRow ?
                    <el-select value={row[column.prop]} onInput={(val) => { row[column.prop] = val }} placeholder="请选择">
                      {[].map((item, index_) => <el-option key={index_} label={item.label} value={item.value}></el-option>)}
                    </el-select> :
                    <div>{row[column.prop]}</div>
                )
              }
            }]
          }
          return []
        })(),
        ...(() => {
          if (!!~['auxiliaryMaterialsStorage', 'returnAuxiliaryMaterials', 'partsStorage', 'partsReturn'].indexOf(this.pageType)) {
            return [{
              columnAttributes: {
                label: '单位',
                prop: 'purchaseId',
              }
            }]
          }
          return []
        })(),
        ...(() => {
          if (!!~['auxiliaryMaterialsStorage', 'partsStorage'].indexOf(this.pageType)) {
            return [{
              columnAttributes: {
                label: '数量',
                prop: 'recQty',
              },
              render: (h, { row, column, index }) => {
                return (
                  row.isEditRow ?
                    <el-input type="number" value={row[column.prop]} onInput={(val) => { row[column.prop] = val }} placeholder="请选择">
                    </el-input> :
                    <div>{row[column.prop]}</div>
                )
              }
            }]
          }
          return []
        })(),
        ...(() => {
          if (!!~['returnAuxiliaryMaterials', 'partsReturn'].indexOf(this.pageType)) {
            return [{
              columnAttributes: {
                label: '退货数量',
                prop: 'retQty',
              },
              render: (h, { row, column, index }) => {
                return (
                  row.isEditRow ?
                    <el-input type="number" value={row[column.prop]} onInput={(val) => { row[column.prop] = val }} placeholder="请选择">
                    </el-input> :
                    <div>{row[column.prop]}</div>
                )
              }
            }]
          }
          return []
        })(),
        ...(() => {
          if (!!~['returnAuxiliaryMaterials', 'partsReturn'].indexOf(this.pageType)) {
            return [{
              columnAttributes: {
                label: '退款金额',
                prop: 'retValue',
              },
              render: (h, { row, column, index }) => {
                return (
                  row.isEditRow ?
                    <el-input type="number" value={row[column.prop]} onInput={(val) => { row[column.prop] = val }} placeholder="请选择">
                    </el-input> :
                    <div>{row[column.prop]}</div>
                )
              }
            }]
          }
          return []
        })(),
        ...(() => {
          if (!!~['auxiliaryMaterialsStorage', 'returnAuxiliaryMaterials'].indexOf(this.pageType)) {
            return [{
              columnAttributes: {
                label: '商品代码',
                prop: '',
              }
            }]
          }
          return []
        })(),
        ...(() => {
          if (!!~['auxiliaryMaterialsStorage', 'returnAuxiliaryMaterials'].indexOf(this.pageType)) {
            return [{
              columnAttributes: {
                label: '规格型号',
                prop: 'goodsSpecification',
              }
            }]
          }
          return []
        })(),
        ...(() => {
          if (!!~['partsStorage', 'partsReturn'].indexOf(this.pageType)) {
            return [{
              columnAttributes: {
                label: '配件编码',
                prop: '',
              }
            }]
          }
          return []
        })(),
        ...(() => {
          if (!!~['partsStorage', 'partsReturn'].indexOf(this.pageType)) {
            return [{
              columnAttributes: {
                label: '适用品牌',
                prop: '',
              }
            }]
          }
          return []
        })(),
        ...(() => {
          if (!!~['partsStorage', 'partsReturn'].indexOf(this.pageType)) {
            return [{
              columnAttributes: {
                label: '适用产品大类',
                prop: '',
              }
            }]
          }
          return []
        })(),
        ...(() => {
          if (!!~['returnAuxiliaryMaterials', 'partsReturn'].indexOf(this.pageType)) {
            return [{
              columnAttributes: {
                label: '采购数量',
                prop: '',
              }
            }]
          }
          return []
        })(),
        ...(() => {
          if (!!~['auxiliaryMaterialsStorage', 'returnAuxiliaryMaterials', 'partsStorage', 'partsReturn'].indexOf(this.pageType)) {
            return [{
              columnAttributes: {
                label: '采购价格',
                prop: '',
              }
            }]
          }
          return []
        })(),
        ...(() => {
          if (!!~['auxiliaryMaterialsStorage', 'returnAuxiliaryMaterials', 'partsStorage', 'partsReturn'].indexOf(this.pageType)) {
            return [{
              columnAttributes: {
                label: '采购金额',
                prop: '',
              }
            }]
          }
          return []
        })(),
        ...(() => {
          if (!!~['auxiliaryMaterialsStorage', 'returnAuxiliaryMaterials', 'partsReturn'].indexOf(this.pageType)) {
            return [{
              columnAttributes: {
                label: '库存数量',
                prop: '',
              }
            }]
          }
          return []
        })(),
        ...(() => {
          if (!!~[0, 1].indexOf(this.formDialogType)) {
            return [{
              columnAttributes: {
                label: '操作',
                prop: '',
              },
              render: (h, { row, column, index }) => {
                return (
                  <div class='operation-btns'>
                    <el-button type="text" onClick={() => {
                      this.formData.items.map((item, index_) => {
                        if (index_ == index) {
                          item.isEditRow = true
                        } else {
                          item.isEditRow = false
                        }
                      })
                    }}>编辑</el-button>
                    <el-button type="text" onClick={() => {
                      this.formData.items.splice(index, 1)
                    }}>删除</el-button>
                  </div>
                )
              }
            }]
          }
          return []
        })(),
      ]
    },
    formItems1() {
      return [
        {
          md: 24,
          isShow: true,
          name: 'slot-component',
          formItemAttributes: {
            label: '',
            prop: '',
            'label-width': '0px'
          },
          render: (h, { props, onInput }) => {
            var { value } = props
            return (
              <div>
                <el-descriptions border title="" column={4} colon={false} labelStyle={{ width: '8%' }} contentStyle={{ width: '17%' }}>
                  <el-descriptions-item label="单据状态">
                    {({ SAVE: "保存", OK: "通过", FAIL: "失败" })[this.formData.flag]}
                  </el-descriptions-item>
                  <el-descriptions-item label="单据编号">
                    {(!!~['auxiliaryMaterialsStorage', 'partsStorage'].indexOf(this.pageType) ? this.formData.purchaseId : this.formData.purchaseRetId) || ''}
                  </el-descriptions-item>
                  <el-descriptions-item label="所属商户" contentStyle={{ width: '42%' }}>
                    {this.formData.companyWechatName}
                  </el-descriptions-item>
                </el-descriptions>
                <el-descriptions border title="" column={2} colon={false} labelStyle={{ width: '8%' }} contentStyle={{ width: '42%' }} style="margin-top:-1px">
                  <el-descriptions-item label="网点名称">
                    {this.formData.websitName}
                  </el-descriptions-item>
                  <el-descriptions-item label="供应商名称">
                    {this.formData.venderName}
                  </el-descriptions-item>
                </el-descriptions>
                {
                  !!~['returnAuxiliaryMaterials', 'partsReturn'].indexOf(this.pageType) ?
                    <el-descriptions border title="" column={4} colon={false} labelStyle={{ width: '8%' }} contentStyle={{ width: '17%' }} style="margin-top:-1px">
                      <el-descriptions-item label="采购入库单号" contentStyle={{ width: '42%' }}>
                        {this.formData.purchaseId}
                      </el-descriptions-item>
                      <el-descriptions-item label="退货数量">
                        {this.formData.purchaseId}
                      </el-descriptions-item>
                      <el-descriptions-item label="退款金额">
                        {this.formData.purchaseId}
                      </el-descriptions-item>
                    </el-descriptions> : null
                }
                <el-descriptions border title="" column={4} colon={false} labelStyle={{ width: '8%' }} contentStyle={{ width: '17%' }} style="margin-top:-1px">
                  <el-descriptions-item label="制单人">
                    {this.formData.createBy}
                  </el-descriptions-item>
                  <el-descriptions-item label="制单时间">
                    {this.formData.createTime}
                  </el-descriptions-item>
                  <el-descriptions-item label="审核人">
                    {this.formData.confirmBy}
                  </el-descriptions-item>
                  <el-descriptions-item label="审核时间">
                    {this.formData.confirmTime}
                  </el-descriptions-item>
                </el-descriptions>
                <el-descriptions border title="" column={4} colon={false} labelStyle={{ width: '8%' }} contentStyle={{ width: '17%' }} style="margin-top:-1px">
                  <el-descriptions-item label="附件">
                    <ImageUpload fileList={this.formData.imageUrl} uid="imgSrc666_materials_drawing_images" limit={1} isEdit={this.formDialogType < 2} />
                  </el-descriptions-item>
                  <el-descriptions-item label="备注" contentStyle={{ width: '67%' }}>
                    <el-input
                      type="textarea"
                      placeholder="请输入内容"
                      value={this.formData.remark}
                      onInput={(val) => { this.formData.remark = val }}
                      maxlength="200"
                      show-word-limit
                      autosize={{ minRows: 6, maxRows: 8 }}
                    >
                    </el-input>
                  </el-descriptions-item>
                </el-descriptions>
              </div>
            )
          }
        },]
    },
    formItems2() {
      return [
        {
          md: 24,
          isShow: true,
          name: 'slot-component',
          formItemAttributes: {
            label: '',
            prop: '',
            'label-width': '0px'
          },
          render: (h, { props, onInput }) => {
            var { value } = props
            return (
              <div>
                {!!~[0, 1].indexOf(this.formDialogType) ? <div style="margin-bottom:8px">
                  <el-button onClick={() => {
                    this.formData.items.push({
                      "brand": "",
                      "companyWechatId": "",
                      "cost": "",
                      "costValue": "",
                      "goodsCategoryId": "",
                      "goodsCategoryName": "",
                      "goodsId": "",
                      "goodsName": "",
                      "goodsSpecification": "",
                      "goodsStockUnit": "",
                      "goodsType": "",
                      "note": "",
                      "parentCategoryId": "",
                      "parentCategoryName": "",
                      "productCategory": "",
                      "purchaseId": "",
                      "recQty": "",
                      "retQty": "",
                      "stockQty": "",
                      "websitId": "",
                      "websitName": ""
                    })
                    // if (this.pageType == "auxiliaryMaterialsStorage") {
                    // } else if (this.pageType == "returnAuxiliaryMaterials") {
                    // } else if (this.pageType == "partsStorage") {
                    // } else if (this.pageType == "partsReturn") {
                    // }
                  }}>添加</el-button>
                </div> : null}
                <zj-table
                  columns={this.columns}
                  tableData={this.formData.items}
                  tableAttributes={{
                    size: 'mini',
                    border: true,
                  }} />
              </div>
            )
          }
        },]
    }
  },
  methods: {
    // 表格列解析渲染数据更改
    columnParsing(item, defaultData) {
      return defaultData
    },
    // 监听勾选变化
    selectionChange(data) {
      this.recordSelected = data
    },
    // 打开
    openForm() {
      {/* Promise.all([
            
          ]).then(([res1]) => {
            
          }) */}
      this.formDialog = true
    },
    // 添加
    addData() {
      this.formDialogType = 0
      this.openForm()
    },
    // 关闭弹窗
    formCancel() {
      this.$refs.formRef.$refs.inlineForm.clearValidate()
      this.$data.formData = this.$options.data().formData
      this.formDialog = false
    },
  },
}