zfire-newmall-admin/src/views/workOrder/basicEngineeringData/index.vue

<template>
  <zj-tab-page ref="tabPage" :defaultActives="[{ key: 'list', label: $route.meta.title + '-列表', essential: true }]">
    <template slot-scope="{activeKey, data}">
      <div :style="{
        width: '100%',
        height: activeKey == 'list' ? '100%' : '0px',
        overflow: 'hidden'
      }">
        <template-page ref="pageRef" :get-list="getList" :table-attributes="tableAttributes" :table-events="tableEvents"
          :options-evens-group="optionsEvensGroup" :moreParameters="moreParameters" :column-parsing="columnParsing"
          :exportList="exportList" :operation="operation()">
        </template-page>
      </div>
      <div v-if="~['add', 'detail'].indexOf(activeKey)" style="box-sizing: border-box;padding: 16px;">
        <el-tabs v-if="activeKey == 'detail'" v-model="activeType_e">
          <el-tab-pane label="基础资料" name="jbzl"></el-tab-pane>
          <el-tab-pane label="修改记录" name="xgjl"></el-tab-pane>
        </el-tabs>
        <br v-if="activeKey == 'detail'" />
        <div v-if="activeType_e == 'jbzl'">
          <zj-form-container ref="formRef" :form-data="formData" :styleSwitch="false">
            <zj-form-module :title="data.label" :showPackUp="false" :form-data="formData" :form-items="formItems">
            </zj-form-module>
            <zj-form-module title="" label-width="100px" :form-data="formData" :form-items="formItems2">
              <el-tabs slot="header" v-model="activeName">
                <el-tab-pane :disabled="isEditIndex > -1 ? true : false" label="辅材配置" name="items_m"></el-tab-pane>
                <el-tab-pane :disabled="isEditIndex > -1 ? true : false" label="配件配置" name="items_p"></el-tab-pane>
              </el-tabs>
            </zj-form-module>
          </zj-form-container>
          <div slot="footer" class="dialog-footer">
            <el-button size="mini" @click="data.removeTab">取 消</el-button>
            <el-button size="mini" type="primary" @click="quedingbaocun(data.removeTab)">确定</el-button>
          </div>
        </div>
        <div v-if="activeType_e == 'xgjl'">
          <zj-form-container :form-data="formData" :styleSwitch="false">
            <zj-form-module title="修改记录" :showPackUp="false" :form-data="formData" :form-items="logList">
            </zj-form-module>
          </zj-form-container>
        </div>
      </div>
    </template>
  </zj-tab-page>
</template>

<script>
import TemplatePage from '@/components/template/template-page-1.vue'
import import_mixin from '@/components/template/import_mixin.js'
import operation_mixin from '@/components/template/operation_mixin.js'
import ImageUpload from '@/components/file-upload'
import { required, mobileRequired, mobile, httpUrl, email } from '@/components/template/rules_verify.js'
import { orderEnginbaseList, orderEnginBaseListExport, orderEnginBaseSave, orderEnginBaseDetail } from "@/api/basicEngineeringData";
import { lbsAmapRegion } from '@/api/common.js'
import geographicalPosi from '@/components/geographicalPosi/index.vue'
import { listPageV2 } from "@/api/auxiliaryFittings/attachmentProfile";
import { materialNormList } from "@/api/auxiliaryPriceManagement";

export default {
  components: { TemplatePage, ImageUpload, geographicalPosi },
  mixins: [import_mixin, operation_mixin],
  data() {
    return {
      // 表格属性
      tableAttributes: {
        // 启用勾选列
        selectColumn: false
      },
      // 表格事件
      tableEvents: {
        'selection-change': this.selectionChange
      },
      // 勾选选中行
      recordSelected: [],
      activeName: 'items_m',
      formData: {
        companyWechatName: JSON.parse(localStorage.getItem('greemall_user')).companyName,
        projectName: "",
        projectNo: "",
        manger: "",
        mobile: "",
        startTime: "",
        endTime: "",
        provinceId: "",
        cityId: "",
        areaId: "",
        streetId: "",
        address: "",
        remark: "",
        items_m: [],
        items_p: [],
      },
      provinceList: [],
      cityList: [],
      areaList: [],
      streetList: [],
      fucaiSel: [],
      peijianSel: [],
      isEditIndex: -1,
      activeType_e: 'jbzl'
    }
  },
  computed: {
    // 更多参数
    moreParameters() {
      return []
    },
    // 事件组合
    optionsEvensGroup() {
      return [
        [
          [
            this.optionsEvensAuth('add', {
              click: () => {
                this.$refs.tabPage.addTab({
                  // 对应显示的模块
                  activeKey: "add",
                  // 唯一标识
                  key: "add",
                  // 页签名称
                  label: "新增",
                  // 打开时事件
                  triggerEvent: () => {
                    this.activeType_e = 'jbzl'
                    this.handleClose()
                    this.$nextTick(() => {
                      this.getinitlbslist()
                      this.openForm()
                    })
                  },
                  // 关闭时事件
                  closeEvent: () => { }
                })
              }
            })
          ]
        ]
      ]
    },
    formItems() {
      return [
        {
          name: 'el-input',
          md: 12,
          attributes: {
            placeholder: '请输入',
            disabled: true
          },
          formItemAttributes: {
            label: '所属商户',
            prop: 'companyWechatName',
          }
        },
        {
          name: 'el-input',
          md: 12,
          attributes: {
            placeholder: '请输入'
          },
          formItemAttributes: {
            label: '工程名称',
            prop: 'projectName',
            rules: [...required],
          }
        },
        {
          name: 'el-input',
          md: 6,
          attributes: {
            placeholder: '请输入'
          },
          formItemAttributes: {
            label: '工程编号',
            prop: 'projectNo',
            rules: [...required],
          }
        },
        {
          name: 'el-input',
          md: 6,
          attributes: {
            placeholder: '请输入'
          },
          formItemAttributes: {
            label: '负责人',
            prop: 'manger',
            rules: [...required],
          }
        },
        {
          name: 'el-input',
          md: 6,
          attributes: {
            placeholder: '请输入'
          },
          formItemAttributes: {
            label: '联系电话',
            prop: 'mobile',
            rules: [...mobileRequired],
          }
        },
        {
          name: 'slot-component',
          md: 6,
          formItemAttributes: {
            label: '项目时间',
            prop: 'startTime',
            rules: [...required],
          },
          render: (h, { props }) => {
            return (
              <div style={{
                'display': 'flex',
                'justify-content': 'space-between'
              }}>
                <div style="width:49%">
                  <el-date-picker
                    style="width:100%"
                    value={this.formData.startTime}
                    onInput={(val) => { this.formData.startTime = val }}
                    value-format="yyyy-MM-dd HH:mm:ss"
                    type="datetime"
                    placeholder="选择日期">
                  </el-date-picker>
                </div>
                <div style="width:49%">
                  <el-date-picker
                    disabled={true}
                    style="width:100%"
                    value={this.formData.endTime}
                    onInput={(val) => { this.formData.endTime = val }}
                    value-format="yyyy-MM-dd HH:mm:ss"
                    type="datetime"
                    placeholder="选择日期">
                  </el-date-picker>
                </div>
              </div>
            )
          }
        },
        {
          name: 'el-select',
          md: 6,
          formItemAttributes: {
            label: '项目地址', //省
            prop: 'provinceId',
            errLabel: '省',
            rules: [...required],
          },
          options: this.provinceList.map((v, i) => ({ value: v.id, label: v.name })),
          attributes: { disabled: false, clearable: true, filterable: true, placeholder: '请选择' },
          events: {
            change: (val) => {
              // 获取省名称
              this.formData.province = this.provinceList.find(item => item.id === val)?.name || ''
              // 清除市区街道以及详细地址数据
              this.delDataK(1)
              lbsAmapRegion({ pid: val }).then(res => {
                this.cityList = res.data
              })
            }
          }
        },
        {
          name: 'el-select',
          md: 5,
          formItemAttributes: {
            'label-width': '0px',
            label: '', //市
            prop: 'cityId',
            errLabel: '市',
            rules: [...required],
          },
          options: this.cityList.map((v, i) => ({ value: v.id, label: v.name })),
          attributes: { disabled: false, clearable: true, filterable: true, placeholder: '请选择' },
          events: {
            change: (val) => {
              // 获取市名称
              this.formData.city = this.cityList.find(item => item.id === val).name
              // 清除区街道以及详细地址数据
              this.delDataK(2)
              lbsAmapRegion({ pid: val }).then(res => {
                this.areaList = res.data
              })
            }
          }
        },
        {
          name: 'el-select',
          md: 5,
          formItemAttributes: {
            'label-width': '0px',
            label: '', //区
            prop: 'areaId',
            errLabel: '区',
            rules: [...required],
          },
          options: this.areaList.map((v, i) => ({ value: v.id, label: v.name })),
          attributes: { disabled: false, clearable: true, filterable: true, placeholder: '请选择' },
          events: {
            change: (val) => {
              // 获取区名称
              this.formData.area = this.areaList.find(item => item.id === val).name
              // 清除街道以及详细地址数据
              this.delDataK(3)
              lbsAmapRegion({ pid: val }).then(res => {
                this.streetList = res.data
              })
            }
          }
        },
        {
          name: 'el-select',
          md: 5,
          formItemAttributes: {
            'label-width': '0px',
            label: '', //街道
            prop: 'streetId',
            errLabel: '街道',
            rules: [...required],
          },
          options: this.streetList.map((v, i) => ({ value: v.id, label: v.name })),
          attributes: { disabled: false, clearable: true, filterable: true, placeholder: '请选择' },
          events: {
            change: (val) => {
              // 获取街道名称
              this.formData.street = this.streetList.find(item => item.id === val).name
              // 清除详细地址数据
              this.delDataK(4)
            }
          }
        },
        {
          name: 'slot-component',
          md: 3,
          formItemAttributes: {
            'label-width': '0px',
            prop: '',
          },
          render: (h, { props }) => {
            return (
              <geographicalPosi
                formData={this.formData}
                onSelectPosi={data => {
                  // 获取经纬度
                  this.formData.lng = data.center[0]
                  this.formData.lat = data.center[1]
                  // 获取定位的省市区街道
                  var { province, city, district, township } = data.data.addressComponent
                  // 获取选中省名称id
                  var { id, name } = this.provinceList.find(item => item.name === province)
                  this.formData.provinceId = id
                  this.formData.province = name
                  // 请求市选项
                  lbsAmapRegion({ pid: this.formData.provinceId }).then(res => {
                    // 赋值市选项
                    this.cityList = res.data
                    // 获取选中市名称id
                    var { id, name } = res.data.find(item => item.name === city)
                    this.formData.cityId = id
                    this.formData.city = name
                    // 请求区选项
                    lbsAmapRegion({ pid: this.formData.cityId }).then(res => {
                      // 赋值区选项
                      this.areaList = res.data
                      // 获取选中区名称id
                      var { id, name } = res.data.find(item => item.name === district)
                      this.formData.areaId = id
                      this.formData.area = name
                      // 请求街道选项
                      lbsAmapRegion({ pid: this.formData.areaId }).then(res => {
                        // 赋值街道选项
                        this.streetList = res.data
                        // 获取选中街道名称id
                        var { id, name } = res.data.find(item => item.name === township)
                        this.formData.streetId = id
                        this.formData.street = name
                        this.formData.address = data.name
                      })
                    })
                  })
                }}
              />
            )
          }
        }, {
          name: 'el-input',
          md: 24,
          formItemAttributes: { label: '详细地址', prop: 'address', rules: [...required] },
          attributes: { placeholder: '详细地址' }
        }, {
          name: 'el-input',
          md: 24,
          attributes: {
            type: 'textarea',
            rows: 3,
            placeholder: '请输入'
          },
          formItemAttributes: {
            label: '项目说明',
            prop: 'remark',
          }
        }
      ]
    },
    formItems2() {
      return [
        {
          md: 24,
          isShow: true,
          name: 'slot-component',
          formItemAttributes: {
            label: '',
            prop: '',
            'label-width': '0px'
          },
          render: (h, { props, onInput }) => {
            var { value } = props
            return (
              <div>
                {this.activeName == 'items_m'
                  ? [
                    <div style="margin-bottom:10px">
                      <el-button type="primary" onClick={() => { this.addItem("M") }}>
                        添加
                      </el-button>
                    </div>,
                    <zj-table
                      columns={[
                        {
                          columnAttributes: {
                            label: '大类',
                            prop: 'parentCategoryId',
                            propName: 'parentCategoryName',
                            width: 160
                          },
                          render: (h, { row, column, index }) => {
                            return this.isEditIndex == index ? (
                              <div class="redbordererr">
                                <el-form-item
                                  label=""
                                  lebel-width="0px"
                                  prop={`${this.activeName}.${index}.${column.columnAttributes.prop}`}
                                  rules={required}
                                >
                                  <el-select
                                    filterable={true}
                                    value={row[column.columnAttributes.prop]}
                                    onInput={val => {
                                      row[column.columnAttributes.prop] = val
                                    }}
                                    onChange={val => {
                                      if (val) {
                                        row[column.columnAttributes.propName] = this.arrQC(this.fucaiSel, { value: 'parentCategoryId', label: 'parentCategoryName' }).find(item => item.value == val)?.label || ""
                                      } else {
                                        row[column.columnAttributes.propName] = ''
                                      }
                                      this.delItemKey(1, row)
                                    }}
                                    placeholder="请选择"
                                  >
                                    {
                                      this.arrQC(this.fucaiSel, { value: 'parentCategoryId', label: 'parentCategoryName' }).map((item, index_) => (
                                        <el-option key={index_} label={item.label} value={item.value}></el-option>
                                      ))
                                    }
                                  </el-select>
                                </el-form-item>
                              </div>
                            ) : (
                              <div style="padding:0 6px">{row[column.columnAttributes.propName]}</div>
                            )
                          }
                        },
                        {
                          columnAttributes: {
                            label: '小类',
                            prop: 'goodsCategoryId',
                            propName: 'goodsCategoryName',
                            width: 160
                          },
                          render: (h, { row, column, index }) => {
                            return this.isEditIndex == index ? (
                              <div class="redbordererr">
                                <el-form-item
                                  label=""
                                  lebel-width="0px"
                                  prop={`${this.activeName}.${index}.${column.columnAttributes.prop}`}
                                  rules={required}
                                >
                                  <el-select
                                    filterable={true}
                                    value={row[column.columnAttributes.prop]}
                                    onInput={val => {
                                      row[column.columnAttributes.prop] = val
                                    }}
                                    onChange={val => {
                                      if (val) {
                                        row[column.columnAttributes.propName] = this.arrQC(this.fucaiSel.filter(item => item.parentCategoryId === row.parentCategoryId), { value: 'goodsCategoryId', label: 'categoryName' }).find(item => item.value == val)?.label || ""
                                      } else {
                                        row[column.columnAttributes.propName] = ''
                                      }
                                      this.delItemKey(2, row)
                                    }}
                                    placeholder="请选择"
                                  >
                                    {
                                      this.arrQC(this.fucaiSel.filter(item => item.parentCategoryId === row.parentCategoryId), { value: 'goodsCategoryId', label: 'categoryName' }).map((item, index_) => (
                                        <el-option key={index_} label={item.label} value={item.value}></el-option>
                                      ))
                                    }
                                  </el-select>
                                </el-form-item>
                              </div>
                            ) : (
                              <div style="padding:0 6px">{row[column.columnAttributes.propName]}</div>
                            )
                          }
                        },
                        {
                          columnAttributes: {
                            label: '辅材名称',
                            prop: 'goodsId',
                            propName: 'goodsName',
                            width: 160
                          },
                          render: (h, { row, column, index }) => {
                            return this.isEditIndex == index ? (
                              <div class="redbordererr">
                                <el-form-item
                                  label=""
                                  lebel-width="0px"
                                  prop={`${this.activeName}.${index}.${column.columnAttributes.prop}`}
                                  rules={required}
                                >
                                  <el-select
                                    filterable={true}
                                    value={row[column.columnAttributes.prop]}
                                    onInput={val => {
                                      row[column.columnAttributes.prop] = val
                                    }}
                                    onChange={val => {
                                      this.delItemKey(3, row)
                                      if (val) {
                                        var data = this.arrQC(this.fucaiSel.filter(item => item.parentCategoryId === row.parentCategoryId && item.goodsCategoryId === row.goodsCategoryId), { value: 'goodsId', label: 'goodsName' }).find(item => item.value == val)
                                        row[column.columnAttributes.propName] = data?.label || ""
                                        if (data) {
                                          row.goodsCode = data?.data?.goodsCode
                                          row.goodsSpecification = data?.data?.goodsSpecification
                                          row.normType = "M"
                                          row.goodsStockUnit = data?.data?.goodsStockUnit
                                        }
                                      } else {
                                        row[column.columnAttributes.propName] = ''
                                      }
                                    }}
                                    placeholder="请选择"
                                  >
                                    {
                                      this.arrQC(this.fucaiSel.filter(item => item.parentCategoryId === row.parentCategoryId && item.goodsCategoryId === row.goodsCategoryId), { value: 'goodsId', label: 'goodsName' }).map((item, index_) => (
                                        <el-option key={index_} label={item.label} value={item.value}></el-option>
                                      ))
                                    }
                                  </el-select>
                                </el-form-item>
                              </div>
                            ) : (
                              <div style="padding:0 6px">{row[column.columnAttributes.propName]}</div>
                            )
                          }
                        },
                        {
                          columnAttributes: {
                            label: '商品代码',
                            prop: 'goodsCode',
                            width: 160
                          }
                        },
                        {
                          columnAttributes: {
                            label: '规格型号',
                            prop: 'goodsSpecification',
                            width: 160
                          }
                        },
                        {
                          columnAttributes: {
                            label: '单位',
                            prop: 'goodsStockUnit',
                            width: 160
                          }
                        },
                        {
                          columnAttributes: {
                            label: '收费类型',
                            prop: 'normType',
                            width: 160
                          },
                          render: (h, { row, column, index }) => {
                            return <div style="padding:0 6px">{({ M: '物料收费', S: '服务收费' })[row[column.columnAttributes.prop]] || ''}</div>
                          }
                        },
                        ...this.commonColumns
                      ]}
                      tableData={this.formData.items_m}
                      tableAttributes={{
                        size: 'mini',
                        border: true
                      }}
                    />
                  ]
                  : this.activeName == 'items_p'
                    ? [
                      <div style="margin-bottom:10px">
                        <el-button type="primary" onClick={() => { this.addItem("P") }}>
                          添加
                        </el-button>
                      </div>,
                      <zj-table
                        columns={[
                          {
                            columnAttributes: {
                              label: '配件名称',
                              prop: 'goodsId',
                              propName: 'goodsName',
                              width: 160
                            },
                            render: (h, { row, column, index }) => {
                              return this.isEditIndex == index ? (
                                <div class="redbordererr">
                                  <el-form-item
                                    label=""
                                    lebel-width="0px"
                                    prop={`${this.activeName}.${index}.${column.columnAttributes.prop}`}
                                    rules={required}
                                  >
                                    <el-select
                                      filterable={true}
                                      value={row[column.columnAttributes.prop]}
                                      onInput={val => {
                                        row[column.columnAttributes.prop] = val
                                      }}
                                      onChange={val => {
                                        this.delItemKey(3, row)
                                        if (val) {
                                          var data = this.peijianSel.find(item => item.goodsId == val)
                                          row[column.columnAttributes.propName] = data?.goodsName || ""
                                          if (data) {
                                            row.goodsStockUnit = data.goodsStockUnit
                                            row.goodsCode = data.goodsCode
                                            row.normType = data.normType
                                            row.brandRelaName = data.brandRelaName
                                            row.productRelaName = data.productRelaName
                                          }
                                        } else {
                                          row[column.columnAttributes.propName] = ''
                                        }
                                      }}
                                      placeholder="请选择"
                                    >
                                      {this.peijianSel.map((item, index_) => (
                                        <el-option key={index_} label={item.goodsName} value={item.goodsId}></el-option>
                                      ))}
                                    </el-select>
                                  </el-form-item>
                                </div>
                              ) : (
                                <div style="padding:0 6px">{row[column.columnAttributes.propName]}</div>
                              )
                            }
                          },
                          {
                            columnAttributes: {
                              label: '单位',
                              prop: 'goodsStockUnit',
                              width: 160
                            }
                          },
                          {
                            columnAttributes: {
                              label: '商品代码',
                              prop: 'goodsCode',
                              width: 160
                            }
                          },
                          {
                            columnAttributes: {
                              label: '收费类型',
                              prop: 'normType',
                              width: 160
                            },
                            render: (h, { row, column, index }) => {
                              return <div style="padding:0 6px">{({ M: '物料收费', S: '服务收费' })[row[column.columnAttributes.prop]] || ''}</div>
                            }
                          },
                          {
                            columnAttributes: {
                              label: '适用品牌',
                              prop: 'brandRelaName',
                              width: 160
                            }
                          },
                          {
                            columnAttributes: {
                              label: '适用产品大类',
                              prop: 'productRelaName',
                              width: 160
                            }
                          },
                          ...this.commonColumns
                        ]}
                        tableData={this.formData.items_p}
                        tableAttributes={{
                          size: 'mini',
                          border: true
                        }}
                      />
                    ]
                    : null}
              </div>
            )
          }
        }
      ]
    },
    commonColumns() {
      return [{
        columnAttributes: {
          label: '销售价格（元）',
          prop: 'normAmount',
        },
        render: (h, { row, column, index }) => {
          return this.isEditIndex == index ? (
            <div class="redbordererr">
              <el-form-item
                label=""
                lebel-width="0px"
                prop={`${this.activeName}.${index}.${column.columnAttributes.prop}`}
                rules={required}
              >
                <el-input
                  value={row[column.columnAttributes.prop]}
                  onInput={val => {
                    row[column.columnAttributes.prop] = val
                  }}
                  type="number"
                  placeholder="请输入"
                ></el-input>
              </el-form-item>
            </div>
          ) : (
            <div style="padding:0 6px">{row[column.columnAttributes.prop]}</div>
          )
        }
      },
      // {
      //   columnAttributes: {
      //     label: '师傅分账金额（元）',
      //     prop: 'workerAmount',
      //     width: 160
      //   },
      //   render: (h, { row, column, index }) => {
      //     return this.isEditIndex == index ? (
      //       <div class="redbordererr">
      //         <el-form-item
      //           label=""
      //           lebel-width="0px"
      //           prop={`${this.activeName}.${index}.${column.columnAttributes.prop}`}
      //           rules={required}
      //         >
      //           <el-input
      //             value={row[column.columnAttributes.prop]}
      //             onInput={val => {
      //               row[column.columnAttributes.prop] = val
      //             }}
      //             type="number"
      //             placeholder="请输入"
      //           ></el-input>
      //         </el-form-item>
      //       </div>
      //     ) : (
      //       <div style="padding:0 6px">{row[column.columnAttributes.prop]}</div>
      //     )
      //   }
      // }, {
      //   columnAttributes: {
      //     label: '商户分账金额（元）',
      //     prop: 'websitAmount',
      //     width: 160
      //   },
      //   render: (h, { row, column, index }) => {
      //     return this.isEditIndex == index ? (
      //       <div class="redbordererr">
      //         <el-form-item
      //           label=""
      //           lebel-width="0px"
      //           prop={`${this.activeName}.${index}.${column.columnAttributes.prop}`}
      //           rules={required}
      //         >
      //           <el-input
      //             value={row[column.columnAttributes.prop]}
      //             onInput={val => {
      //               row[column.columnAttributes.prop] = val
      //             }}
      //             type="number"
      //             placeholder="请输入"
      //           ></el-input>
      //         </el-form-item>
      //       </div>
      //     ) : (
      //       <div style="padding:0 6px">{row[column.columnAttributes.prop]}</div>
      //     )
      //   }
      // }, 
      {
        columnAttributes: {
          label: '操作',
          fixed: 'right',
          width: 140
        },
        render: (h, { row, column, index }) => {
          return (
            <div style="padding:0 6px" class="operation-btns">
              {[
                this.isEditIndex == index ? (
                  <el-button
                    type="text"
                    onClick={() => { this.verifyBtn() }}
                  >
                    确认
                  </el-button>
                ) : null,
                this.isEditIndex == -1 ? (
                  <el-button
                    type="text"
                    onClick={() => { this.isEditIndex = index }}
                  >
                    编辑
                  </el-button>
                ) : null,
                <el-button
                  type="text"
                  onClick={() => {
                    this.formData?.[this.activeName]?.splice(index, 1)
                    if (index == this.isEditIndex) {
                      this.isEditIndex = -1
                    }
                  }}
                >
                  删除
                </el-button>
              ]}
            </div>
          )
        }
      }]
    },
    logList() {
      return [
        {
          md: 24,
          isShow: true,
          name: 'slot-component',
          formItemAttributes: {
            label: '',
            prop: '',
            'label-width': '0px'
          },
          render: (h, { props, onInput }) => {
            var { value } = props
            return (
              <zj-table
                columns={[
                  {
                    columnAttributes: {
                      label: '操作类型',
                      prop: 'typeText',
                    }
                  },
                  {
                    columnAttributes: {
                      label: '操作内容',
                      prop: 'content',
                    }
                  },
                  {
                    columnAttributes: {
                      label: '操作人',
                      prop: 'createBy',
                    }
                  },
                  {
                    columnAttributes: {
                      label: '操作时间',
                      prop: 'createTime',
                    }
                  },
                ]}
                tableData={this.formData.operatorLogList}
                tableAttributes={{
                  size: 'mini',
                  border: true
                }}
              />
            )
          }
        }
      ]
    },
  },
  methods: {
    // 列表请求函数
    getList: orderEnginbaseList,
    // 列表导出函数
    exportList: orderEnginBaseListExport,
    // 表格列解析渲染数据更改
    columnParsing(item, defaultData) {
      return defaultData
    },
    // 监听勾选变化
    selectionChange(data) {
      this.recordSelected = data
    },
    handleClose() {
      this.$refs?.formRef?.resetFields()
      this.$data.formData = this.$options.data().formData
      this.activeName = 'items_m'
    },
    // 打开弹窗
    openForm() {
      this.isEditIndex = -1
      // 获取辅材下拉数据
      materialNormList({ "pageNum": 1, "pageSize": -1, "params": [{ "param": "a.status", "compare": "=", "value": "ON" }] }).then(res => {
        this.fucaiSel = res.data.records
      });
      // 获取配件下拉数据
      listPageV2({ "pageNum": 1, "pageSize": -1, "params": [{ "param": "a.status", "compare": "=", "value": "ON" }, { "param": "a.norm_type", "compare": "=", "value": "M" }] }).then(res => {
        this.peijianSel = res.data.records
      });
    },
    quedingbaocun(removeTab) {
      this.$refs.formRef.validate((valid, invalidFields, errLabels) => {
        if (valid) {
          orderEnginBaseSave({
            ...this.formData,
            items: [...this.formData.items_m, ...this.formData.items_p]
          }).then(res => {
            this.$message({
              type: 'success',
              message: '保存成功'
            })
            this.handleClose()
            this.$refs.pageRef.refreshList()
            removeTab && removeTab()
          })
        }
      })
    },
    // 操作按钮
    operation() {
      return this.operationBtn({
        detail: {
          click: ({ row, index, column }) => {
            this.$refs.tabPage.addTab({
              // 对应显示的模块
              activeKey: "detail",
              // 唯一标识
              key: "detail",
              // 页签名称
              label: "详情",
              // 打开时事件
              triggerEvent: () => {
                this.activeType_e = 'jbzl'
                this.handleClose()
                this.$nextTick(() => {
                  orderEnginBaseDetail({ id: row.id }).then(res => {
                    Object.assign(this.formData, res.data, {
                      items_m: (res.data.items || []).filter(item => item.goodsType == "M"),
                      items_p: (res.data.items || []).filter(item => item.goodsType == "P"),
                    })
                    this.getinitlbslist()
                    this.openForm()
                  })
                })
              },
              // 关闭时事件
              closeEvent: () => { }
            })
          }
        },
        orderDetail: {
          click: ({ row, index, column }) => {
            this.$router.push({
              name: 'workOrderPool',
              params: {
                pageName: row.projectNo,
                pageType: 'projectNo',
                pageCode: row.projectNo,
              },
            })
          }
        }
      })
    },
    // 获取省市区街道
    getinitlbslist() {
      // 初始化请求省市区街道下拉选项数据
      lbsAmapRegion({ pid: 0 }).then(res => {
        this.provinceList = res.data
        if (this.formData.provinceId) {
          var item = this.provinceList.find(item => item.name === this.formData.provinceId)
          if (item) {
            this.formData.province = item.name
          }
          lbsAmapRegion({ pid: this.formData.provinceId }).then(res => {
            this.cityList = res.data
            if (this.formData.cityId) {
              var item2 = this.cityList.find(item => item.name === this.formData.cityId)
              if (item2) {
                this.formData.city = item2.name
              }
              lbsAmapRegion({ pid: this.formData.cityId }).then(res => {
                this.areaList = res.data
                if (this.formData.areaId) {
                  var item3 = this.areaList.find(item => item.name === this.formData.areaId)
                  if (item3) {
                    this.formData.city = item2.name
                  }
                  lbsAmapRegion({ pid: this.formData.areaId }).then(res => {
                    this.streetList = res.data
                    if (this.formData.streetId) {
                      var item4 = this.streetList.find(item => item.name === this.formData.streetId)
                      if (item4) {
                        this.formData.street = item4.name
                      }
                    }
                  })
                }
              })
            }
          })
        }
      })
    },
    delDataK(num) {
      if (num <= 1) {
        // 删除市
        this.formData.cityId = ''
        this.formData.city = ''
        // 删除市选项
        this.cityList = []
      }
      if (num <= 2) {
        // 删除区
        this.formData.areaId = ''
        this.formData.area = ''
        // 删除区选项
        this.areaList = []
      }
      if (num <= 3) {
        // 删除街道
        this.formData.streetId = ''
        this.formData.street = ''
        // 删除街道选项
        this.streetList = []
      }
      // 删除gps地址
      this.formData.address = ''
    },
    delItemKey(num, row) {
      if (num <= 1) {
        row.goodsCategoryId = ""
        row.goodsCategoryName = ""
      }
      if (num <= 2) {
        row.goodsId = ""
        row.goodsName = ""
      }
      if (num <= 3) {
        row.brandRelaId = ""
        row.brandRelaName = ""
        row.goodsBarcodeId = ""
        row.goodsCode = ""
        row.goodsSpecification = ""
        row.goodsStockUnit = ""
        row.normType = ""
        row.orderEnginBaseId = ""
        row.productCreateBy = ""
        row.productCreateTime = ""
        row.productRelaId = ""
        row.productRelaName = ""
        row.productUpdateBy = ""
        row.productUpdateTime = ""
      }
    },
    arrQC(list, qz = { label: '', value: '' }) {
      var obj = {}
      for (var item of list) {
        obj[item[qz?.value || 'value']] = item
      }
      return Object.keys(obj).map(key => {
        return {
          data: obj[key],
          value: key,
          label: obj[key][qz?.label || 'label']
        }
      })
    },
    addItem(goodsType) {
      if (this.isEditIndex > -1) {
        this.$refs.formRef.validateField(this.getVfyKey(this.isEditIndex), (valid, invalidFields, errLabels) => {
          if (valid) {
            this.formData[this.activeName].unshift({
              "brandRelaId": "",
              "brandRelaName": "",
              "goodsBarcodeId": "",
              "goodsCategoryId": "",
              "goodsCategoryName": "",
              "goodsCode": "",
              "goodsId": "",
              "goodsName": "",
              "goodsSpecification": "",
              "goodsStockUnit": "",
              "goodsType": goodsType,
              "normAmount": '',
              "normType": "",
              "orderEnginBaseId": "",
              "parentCategoryId": "",
              "parentCategoryName": "",
              "productCreateBy": "",
              "productCreateTime": "",
              "productRelaId": "",
              "productRelaName": "",
              "productUpdateBy": "",
              "productUpdateTime": "",
              // "websitAmount": '',
              // "workerAmount": ''
            })
            this.isEditIndex = 0
          }
        })
      } else {
        this.formData[this.activeName].unshift({
          "brandRelaId": "",
          "brandRelaName": "",
          "goodsBarcodeId": "",
          "goodsCategoryId": "",
          "goodsCategoryName": "",
          "goodsCode": "",
          "goodsId": "",
          "goodsName": "",
          "goodsSpecification": "",
          "goodsStockUnit": "",
          "goodsType": goodsType,
          "normAmount": '',
          "normType": "",
          "orderEnginBaseId": "",
          "parentCategoryId": "",
          "parentCategoryName": "",
          "productCreateBy": "",
          "productCreateTime": "",
          "productRelaId": "",
          "productRelaName": "",
          "productUpdateBy": "",
          "productUpdateTime": "",
          // "websitAmount": '',
          // "workerAmount": ''
        })
        this.isEditIndex = 0
      }
    },
    getVfyKey() {
      return [
        `${this.activeName}.${this.isEditIndex}.parentCategoryId`,
        `${this.activeName}.${this.isEditIndex}.goodsCategoryId`,
        `${this.activeName}.${this.isEditIndex}.goodsId`,
        `${this.activeName}.${this.isEditIndex}.normAmount`,
        // `${this.activeName}.${this.isEditIndex}.workerAmount`,
        // `${this.activeName}.${this.isEditIndex}.websitAmount`,
      ]
    },
    verifyBtn() {
      this.$refs.formRef.validateField(this.getVfyKey(this.isEditIndex), (valid, invalidFields, errLabels) => {
        if (valid) {
          this.isEditIndex = -1
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped></style>