no message

src/api/penaltyWorkOrder.js

@@ -0,0 +1,49 @@
+import request, { postBlob, getBlob, handleImport } from '@/utils/request'
+
+export function orderPunishList(data) {
+  return request({
+    url: `/order/punish/list?moduleId=${data.moduleId}`,
+    method: 'post',
+    data
+  })
+}
+
+export function orderPunishListExport(data, name) {
+  return postBlob({
+    url: '/order/punish/list/export',
+    data,
+    name
+  })
+}
+
+export function orderPunishExamine(params) {
+  return request({
+    url: '/order/punish/examine',
+    method: 'post',
+    params
+  })
+}
+
+export function orderPunishDelete(params) {
+  return request({
+    url: '/order/punish/delete',
+    method: 'post',
+    params
+  })
+}
+
+export function orderPunishDetail(params) {
+  return request({
+    url: '/order/punish/detail',
+    method: 'post',
+    params
+  })
+}
+
+export function orderPunishSave(data) {
+  return request({
+    url: `/order/punish/save`,
+    method: 'post',
+    data
+  })
+}

src/views/workOrder/penaltyWorkOrder/index.vue

@@ -0,0 +1,260 @@
+<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;">
+        <div>
+          <zj-form-container ref="formRef" :form-data="formData" :styleSwitch="false">
+            <zj-form-module title="客户信息" :showPackUp="false" :form-data="formData" :form-items="basicInfo">
+            </zj-form-module>
+            <zj-form-module title="产品信息" :showPackUp="false" :form-data="formData" :form-items="product">
+            </zj-form-module>
+            <zj-form-module title="处罚信息" label-width="100px" :showPackUp="false" :form-data="formData"
+              :form-items="pandanxinxi">
+            </zj-form-module>
+            <zj-form-module title="处置信息" label-width="100px" :showPackUp="false" :form-data="formData"
+              :form-items="czpandanxinxi">
+            </zj-form-module>
+          </zj-form-container>
+          <div slot="footer" class="dialog-footer">
+            <el-button size="mini" @click="data.removeTab">取 消</el-button>
+            <el-button v-if="!formData.status || formData.status == 'SAVE'" size="mini" type="primary"
+              @click="quedingbaocun(data.removeTab)">保存</el-button>
+            <el-button v-if="formData.status == 'SAVE'" size="mini" type="primary"
+              @click="quedingshenhe(data.removeTab)">审核</el-button>
+          </div>
+        </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 basicInfo from "./mixins/basicInfo"
+import productColumns from "./mixins/productColumns"
+import pandanxinxi from "./mixins/pandanxinxi"
+import czpandanxinxi from "./mixins/czpandanxinxi"
+import { orderPunishList, orderPunishListExport, orderPunishExamine, orderPunishDelete, orderPunishDetail, orderPunishSave } from "@/api/penaltyWorkOrder";
+export default {
+  components: { TemplatePage },
+  mixins: [import_mixin, operation_mixin, basicInfo, productColumns, pandanxinxi, czpandanxinxi],
+  data() {
+    return {
+      // 表格属性
+      tableAttributes: {
+        // 启用勾选列
+        selectColumn: false
+      },
+      // 表格事件
+      tableEvents: {
+        'selection-change': this.selectionChange
+      },
+      // 勾选选中行
+      recordSelected: [],
+      formData: {
+        "address": "",
+        "area": "",
+        "areaId": "",
+        "city": "",
+        "cityId": "",
+        "disposeOrderBaseId": "",
+        "disposeOrderSmallType": "",
+        "disposeOrderSmallTypeText": "",
+        "disposeWebsitId": "",
+        "disposeWebsitName": "",
+        "disposeWorkerId": "",
+        "disposeWorkerMobile": "",
+        "disposeWorkerName": "",
+        "examineBy": "",
+        "examineRemark": "",
+        "examineTime": "",
+        "fileUrls": "",
+        "id": "",
+        "linkName": "",
+        "orderBaseId": "",
+        "orderSmallType": "",
+        "orderSmallTypeText": "",
+        "province": "",
+        "provinceId": "",
+        "punishOrderProducts": [
+          {
+            "brandId": "",
+            "brandName": "",
+            "insideCode": "",
+            "mainId": "",
+            "mainName": "",
+            "outCode": "",
+            "punishOrderId": "",
+            "smallId": "",
+            "smallName": "",
+            "specsName": "",
+          }
+        ],
+        "punishOrderWorkers": [],
+        "remark": "",
+        "status": "",
+        "street": "",
+        "streetId": "",
+        "totalAmount": "",
+        "userMobile": "",
+        "userMobile2": "",
+        "userName": "",
+        "websitId": "",
+        "websitName": "",
+      },
+    }
+  },
+  computed: {
+    // 更多参数
+    moreParameters() {
+      return []
+    },
+    // 事件组合
+    optionsEvensGroup() {
+      return [
+        [
+          [
+            this.optionsEvensAuth('add', {
+              click: () => {
+                this.$refs.tabPage.addTab({
+                  // 对应显示的模块
+                  activeKey: "add",
+                  // 唯一标识
+                  key: "add",
+                  // 页签名称
+                  label: "新增",
+                  // 打开时事件
+                  triggerEvent: () => {
+                    this.handleClose()
+                    this.$nextTick(() => {
+                      this.openForm()
+                    })
+                  },
+                  // 关闭时事件
+                  closeEvent: () => { }
+                })
+              }
+            })
+          ]
+        ]
+      ]
+    },
+  },
+  methods: {
+    // 列表请求函数
+    getList: orderPunishList,
+    // 列表导出函数
+    exportList: orderPunishListExport,
+    // 表格列解析渲染数据更改
+    columnParsing(item, defaultData) {
+      return defaultData
+    },
+    // 监听勾选变化
+    selectionChange(data) {
+      this.recordSelected = data
+    },
+    // 关闭
+    handleClose() {
+      this.$refs?.formRef?.resetFields()
+      this.$data.formData = this.$options.data().formData
+    },
+    // 打开弹窗
+    openForm() {
+      this.getinitlbslist()
+      this.getProductSel()
+      this.getWebsitList()
+      this.getWorkers()
+      this.getorderSmallTypeData()
+      this.getdisposeWebsitIds()
+    },
+    // 保存
+    quedingbaocun(removeTab) {
+      this.$refs.formRef.validate((valid, invalidFields, errLabels) => {
+        if (valid) {
+          orderPunishSave({
+            ...this.formData
+          }).then(res => {
+            this.$message({
+              type: 'success',
+              message: '保存成功'
+            })
+            this.handleClose()
+            this.$refs.pageRef.refreshList()
+            removeTab && removeTab()
+          })
+        }
+      })
+    },
+    // 审核
+    quedingshenhe(removeTab) {
+      orderPunishExamine({
+        id: this.formData.id,
+        status: "OK",
+      }).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.handleClose()
+                this.$nextTick(() => {
+                  orderPunishDetail({ id: row.id }).then(res => {
+                    Object.assign(this.formData, res.data)
+                    this.openForm()
+                  })
+                })
+              },
+              // 关闭时事件
+              closeEvent: () => { }
+            })
+          }
+        },
+        del: {
+          prompt: "是否确定删除？",
+          click: ({ row, index, column }) => {
+            orderPunishDelete({ id: row.id }).then(res => {
+              this.$message({
+                type: 'success',
+                message: '删除成功'
+              })
+              this.$refs.pageRef.refreshList()
+            })
+          }
+        }
+      })
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped></style>

src/views/workOrder/penaltyWorkOrder/mixins/basicInfo.js

@@ -0,0 +1,282 @@
+import { lbsAmapRegion } from '@/api/common.js'
+import geographicalPosi from '@/components/geographicalPosi/index.vue'
+import { required, mobileRequired, mobile, httpUrl, email } from '@/components/template/rules_verify.js'
+export default {
+  data() {
+    return {
+      provinceList: [],
+      cityList: [],
+      areaList: [],
+      streetList: [],
+    }
+  },
+  computed: {
+    // 基本信息数据模型
+    basicInfo() {
+      return [
+        {
+          name: 'el-input',
+          md: 6,
+          attributes: { placeholder: '请输入' },
+          formItemAttributes: {
+            label: '客户名称',
+            prop: 'userName',
+            rules: [...required],
+          },
+          events: {
+            input: (v) => {
+              this.formData.linkName = v
+            }
+          }
+        },
+        {
+          name: 'el-input',
+          md: 6,
+          attributes: { placeholder: '请输入' },
+          formItemAttributes: {
+            label: '联系人',
+            prop: 'linkName',
+            rules: [...required],
+          }
+        },
+        {
+          name: 'el-input',
+          md: 6,
+          attributes: { placeholder: '请输入', maxlength: 11 },
+          formItemAttributes: {
+            label: '客户电话',
+            prop: 'userMobile',
+            rules: [...mobileRequired],
+          }
+        },
+        {
+          name: 'el-input',
+          md: 6,
+          attributes: { placeholder: '请输入', maxlength: 11 },
+          formItemAttributes: {
+            label: '客户电话2',
+            prop: 'userMobile2',
+          }
+        },
+        {
+          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: '详细地址' }
+        },
+      ]
+    }
+  },
+  methods: {
+    // 获取省市区街道
+    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 = ''
+    },
+  }
+}

src/views/workOrder/penaltyWorkOrder/mixins/czpandanxinxi.js

@@ -0,0 +1,127 @@
+import { memberListPageV2 } from "@/api/masterManagement";
+import { required, mobileRequired, mobile, httpUrl, email } from '@/components/template/rules_verify.js'
+export default {
+  data() {
+    return {
+      workerList_cz: []
+    }
+  },
+  computed: {
+    czpandanxinxi() {
+      return [
+        {
+          name: 'el-input',
+          md: 6,
+          attributes: { placeholder: '请输入' },
+          formItemAttributes: {
+            label: '处罚工单号',
+            prop: 'disposeOrderBaseId',
+            rules: [...required],
+          }
+        },
+        {
+          name: 'el-select',
+          md: 6,
+          options: this.orderSmallTypeData,
+          attributes: {
+            placeholder: '请选择',
+            clearable: true,
+            filterable: true
+          },
+          formItemAttributes: {
+            label: '工单类型',
+            prop: 'disposeOrderSmallType',
+            rules: [...required],
+          },
+          events: {
+            change: (val) => {
+              if (val) {
+                this.formData.disposeOrderSmallTypeText = this.orderSmallTypeData.find(item => item.value == val).label
+              } else {
+                this.formData.disposeOrderSmallTypeText = ''
+              }
+            }
+          }
+        },
+        {
+          name: 'el-select-add',
+          options: this.websitList,
+          md: 6,
+          attributes: {
+            placeholder: '请选择',
+            clearable: true,
+            filterable: true,
+          },
+          formItemAttributes: {
+            label: '网点名称',
+            prop: 'disposeWebsitId',
+            rules: [...required],
+          },
+          events: {
+            change: (val) => {
+              this.formData.disposeWorkerId = ""
+              this.formData.disposeWorkerName = ""
+              this.formData.disposeWorkerMobile = ""
+              this.getdisposeWebsitIds()
+              if (val) {
+                this.formData['disposeWebsitName'] = this.websitList.find(item => item.value == val)?.label || val
+              } else {
+                this.formData['disposeWebsitName'] = ''
+              }
+            }
+          }
+        },
+        {
+          name: 'el-select-add',
+          options: this.workerList_cz,
+          md: 6,
+          attributes: {
+            placeholder: '请选择',
+            clearable: true,
+            filterable: true,
+          },
+          formItemAttributes: {
+            label: '处置工程师',
+            prop: 'disposeWorkerId',
+            rules: [...required],
+          },
+          events: {
+            change: (val) => {
+              if (val) {
+                this.formData['disposeWorkerName'] = this.workerList_cz.find(item => item.value == val)?.label || val
+                this.formData['disposeWorkerMobile'] = this.workerList_cz.find(item => item.value == val)?.data?.workerMobile || ""
+              } else {
+                this.formData['disposeWorkerMobile'] = ''
+                this.formData['disposeWorkerName'] = ''
+              }
+            }
+          }
+        },
+      ]
+    }
+  },
+  methods: {
+    getdisposeWebsitIds() {
+      if (this.formData.disposeWebsitId) {
+        memberListPageV2({ "pageNum": 1, "pageSize": -1, "params": [{ "param": "b.examine_status", "compare": "=", "value": "OK" }, { "param": "b.websit_id", "compare": "=", "value": this.formData.disposeWebsitId }] }).then(res => {
+          this.workerList_cz = res.data.records.map(item => {
+            var { id, userId, ...data } = item
+            return {
+              value: userId,
+              label: data.nickName,
+              data: {
+                workerId: userId,
+                workerName: data.nickName,
+                workerIdcard: data.idCard,
+                workerMobile: data.mobile,
+                ...data
+              }
+            }
+          })
+        })
+      } else {
+        this.workerList_cz = []
+      }
+    }
+  },
+}

src/views/workOrder/penaltyWorkOrder/mixins/pandanxinxi.js

@@ -0,0 +1,250 @@
+import { getWebsit } from "@/api/customerManagement.js"
+import { memberListPageV2 } from "@/api/masterManagement";
+import { required, mobileRequired, mobile, httpUrl, email } from '@/components/template/rules_verify.js'
+import { listPageV2 } from "@/api/workOrder/orderType";
+import ImageUpload from '@/components/file-upload'
+export default {
+  data() {
+    return {
+      websitList: [],
+      workerList: [],
+      orderSmallTypeData: []
+    }
+  },
+  computed: {
+    workersColumns() {
+      return [
+        {
+          columnAttributes: {
+            label: '姓名',
+            prop: 'workerId'
+          },
+          render: (h, { row, column, index }) => {
+            return <div class="redbordererr">
+              <el-form-item label="" label-width="0px" prop={`punishOrderWorkers.${index}.${column.columnAttributes.prop}`} rules={required}>
+                <zj-select
+                  value={row[column.columnAttributes.prop]}
+                  onInput={(val) => { row[column.columnAttributes.prop] = val }}
+                  onChange={(val) => {
+                    if (val) {
+                      var data = this.workerList.find(item => item.value == val)
+                      row.workerMobile = data?.data?.workerMobile || ""
+                      row.workerName = data?.label || val
+                    } else {
+                      row.workerName = ""
+                      row.workerMobile = ""
+                    }
+                  }}
+                  placeholder="请选择"
+                  blurNoMatchText={true}
+                  clearable={true}
+                  filterable={true}
+                  blurNoMatchInputBorderColor="">
+                  {this.workerList.map((item, index_) => <zj-option key={index_} label={item.label} value={item.value}></zj-option>)}
+                </zj-select>
+              </el-form-item>
+            </div>
+          }
+        },
+        {
+          columnAttributes: {
+            label: '联系电话',
+            prop: 'workerMobile'
+          },
+          render: (h, { row, column, index }) => {
+            return <div class="redbordererr">
+              <el-form-item label="" label-width="0px" prop={`punishOrderWorkers.${index}.${column.columnAttributes.prop}`} rules={mobileRequired}>
+                <el-input
+                  value={row[column.columnAttributes.prop]}
+                  onInput={(val) => { row[column.columnAttributes.prop] = val }}
+                  placeholder="请输入内容"
+                >
+                </el-input>
+              </el-form-item>
+            </div>
+          }
+        },
+        {
+          columnAttributes: {
+            label: '处罚金额',
+            prop: 'amount'
+          },
+          render: (h, { row, column, index }) => {
+            return <div class="redbordererr">
+              <el-form-item label="" label-width="0px" prop={`punishOrderWorkers.${index}.${column.columnAttributes.prop}`} rules={required}>
+                <el-input
+                  value={row[column.columnAttributes.prop]}
+                  onInput={(val) => { row[column.columnAttributes.prop] = val }}
+                  placeholder="请输入内容"
+                >
+                </el-input>
+              </el-form-item>
+            </div>
+          }
+        },
+        ...(() => {
+          if (true) {
+            return [
+              {
+                columnAttributes: {
+                  label: '操作',
+                  width: 100
+                },
+                render: (h, { row, column, index }) => {
+                  return <div style="padding-left:10px">
+                    <el-button type="text" onClick={() => {
+                      this.formData.punishOrderWorkers.splice(index, 1)
+                    }}>删除</el-button>
+                  </div>
+                }
+              },
+            ]
+          }
+          return []
+        })()
+      ]
+    },
+    pandanxinxi() {
+      return [
+        {
+          name: 'el-input',
+          md: 6,
+          attributes: { placeholder: '请输入' },
+          formItemAttributes: {
+            label: '处罚工单号',
+            prop: 'orderBaseId',
+            rules: [...required],
+          }
+        },
+        {
+          name: 'el-select',
+          md: 6,
+          options: this.orderSmallTypeData,
+          attributes: {
+            placeholder: '请选择',
+            clearable: true,
+            filterable: true
+          },
+          formItemAttributes: {
+            label: '工单类型',
+            prop: 'orderSmallType',
+            rules: [...required],
+          },
+          events: {
+            change: (val) => {
+              if (val) {
+                this.formData.orderSmallTypeText = this.orderSmallTypeData.find(item => item.value == val).label
+              } else {
+                this.formData.orderSmallTypeText = ''
+              }
+            }
+          }
+        },
+        {
+          name: 'el-select-add',
+          options: this.websitList,
+          md: 6,
+          attributes: {
+            placeholder: '请选择',
+            clearable: true,
+            filterable: true,
+          },
+          formItemAttributes: {
+            label: '网点名称',
+            prop: 'websitId',
+            rules: [...required],
+          },
+          events: {
+            change: (val) => {
+              this.formData.punishOrderWorkers = []
+              this.getWorkers()
+              if (val) {
+                this.formData['websitName'] = this.websitList.find(item => item.value == val)?.label || val
+              } else {
+                this.formData['websitName'] = ''
+              }
+            }
+          }
+        },
+        {
+          name: 'slot-component',
+          md: 24,
+          formItemAttributes: {
+            label: '处罚工程师',
+            prop: 'punishOrderWorkers',
+            rules: [...required],
+          },
+          render: (h, { props }) => {
+            var { formData } = props
+            return (
+              <div>
+                <div>
+                  <el-button size="mini" type="primary" onClick={() => {
+                    this.formData.punishOrderWorkers.unshift({
+                      "amount": "",
+                      "workerId": "",
+                      "workerMobile": "",
+                      "workerName": ""
+                    })
+                  }}>新增</el-button>
+                </div>
+                <zj-table
+                  isDrop={true}
+                  columns={this.workersColumns}
+                  tableData={this.formData.punishOrderWorkers}
+                ></zj-table>
+              </div>
+            )
+          }
+        },
+        {
+          name: 'el-input',
+          md: 24,
+          formItemAttributes: { label: '处罚备注', prop: 'remark' },
+          attributes: { placeholder: '处罚备注' }
+        },
+      ]
+    }
+  },
+  methods: {
+    getorderSmallTypeData() {
+      listPageV2({ "pageNum": 1, "pageSize": -1, "params": [{ "param": "a.status", "compare": "=", "value": "true" }] }).then(res => {
+        this.orderSmallTypeData = res.data.records.map(item => ({
+          value: item.id,
+          label: item.orderSmallTypeText
+        }))
+      })
+    },
+    getWebsitList() {
+      getWebsit({ type: "C", status: true, isAll: true }).then(res => {
+        this.websitList = res.data.map(item => ({
+          label: item.name,
+          value: item.websitId,
+          data: item
+        }))
+      })
+    },
+    getWorkers() {
+      if (this.formData.websitId) {
+        memberListPageV2({ "pageNum": 1, "pageSize": -1, "params": [{ "param": "b.examine_status", "compare": "=", "value": "OK" }, { "param": "b.websit_id", "compare": "=", "value": this.formData.websitId }] }).then(res => {
+          this.workerList = res.data.records.map(item => {
+            var { id, userId, ...data } = item
+            return {
+              value: userId,
+              label: data.nickName,
+              data: {
+                workerId: userId,
+                workerName: data.nickName,
+                workerIdcard: data.idCard,
+                workerMobile: data.mobile,
+                ...data
+              }
+            }
+          })
+        })
+      } else {
+        this.workerList = []
+      }
+    }
+  },
+}

src/views/workOrder/penaltyWorkOrder/mixins/productColumns.js

@@ -0,0 +1,201 @@
+import { getClassifyList } from '@/api/goods'
+import { getDataDictionary } from '@/api/dataDictionary.js'
+import { required, mobileRequired, mobile, httpUrl, email } from '@/components/template/rules_verify.js'
+export default {
+  data() {
+    return {
+      orderBrands: [],
+      classifyList: [],
+      classifyListLv2: []
+    }
+  },
+  computed: {
+    productColumns() {
+      return [
+        {
+          columnAttributes: {
+            label: '产品品牌',
+            prop: 'brandId'
+          },
+          render: (h, { row, column, index }) => {
+            return <div class="redbordererr">
+              <el-form-item label="" label-width="0px" prop={`punishOrderProducts.${index}.${column.columnAttributes.prop}`} rules={required}>
+                <el-select
+                  value={row[column.columnAttributes.prop]}
+                  onInput={(val) => { row[column.columnAttributes.prop] = val }}
+                  onChange={(val) => {
+                    if (val) {
+                      var data = this.orderBrands.find(item => item.value == val)
+                      row.brandName = data.label
+                    } else {
+                      row.brandName = ""
+                    }
+                  }}
+                  placeholder="请选择">
+                  {this.orderBrands.map((item, index_) => <el-option key={index_} label={item.label} value={item.value}></el-option>)}
+                </el-select>
+              </el-form-item>
+            </div>
+          }
+        },
+        {
+          columnAttributes: {
+            label: '产品大类',
+            prop: 'mainId'
+          },
+          render: (h, { row, column, index }) => {
+            return <div class="redbordererr">
+              <el-form-item label="" label-width="0px" prop={`punishOrderProducts.${index}.${column.columnAttributes.prop}`} rules={required}>
+                <el-select
+                  value={row[column.columnAttributes.prop]}
+                  onInput={(val) => { row[column.columnAttributes.prop] = val }}
+                  onChange={(val) => {
+                    row.smallId = ""
+                    row.smallName = ""
+                    if (val) {
+                      var data = this.classifyList.find(item => item.categoryId == val)
+                      row.mainName = data.name
+                    } else {
+                      row.mainName = ""
+                    }
+                  }}
+                  placeholder="请选择">
+                  {this.classifyList.map((item, index_) => <el-option key={index_} label={item.name} value={item.categoryId}></el-option>)}
+                </el-select>
+              </el-form-item>
+            </div>
+          }
+        },
+        {
+          columnAttributes: {
+            label: '产品小类',
+            prop: 'smallId'
+          },
+          render: (h, { row, column, index }) => {
+            return <div class="redbordererr">
+              <el-form-item label="" label-width="0px" prop={`punishOrderProducts.${index}.${column.columnAttributes.prop}`} rules={required}>
+                <el-select
+                  value={row[column.columnAttributes.prop]}
+                  onInput={(val) => { row[column.columnAttributes.prop] = val }}
+                  onChange={(val) => {
+                    if (val) {
+                      var data = this.classifyListLv2.find(item => item.categoryId == val)
+                      console.log(data)
+                      row.smallName = data.name
+                      row.imgUrl = data.imgUrl
+                    } else {
+                      row.smallName = ""
+                      row.imgUrl = ""
+                    }
+                  }}
+                  placeholder="请选择">
+                  {this.classifyListLv2.filter(item => item.parentId === row.mainId).map((item, index_) => <el-option key={index_} label={item.name} value={item.categoryId}></el-option>)}
+                </el-select>
+              </el-form-item>
+            </div>
+          }
+        },
+        {
+          columnAttributes: {
+            label: '产品机型',
+            prop: 'specsName'
+          },
+          render: (h, { row, column, index }) => {
+            return <div class="redbordererr">
+              <el-form-item label="" label-width="0px" prop={`punishOrderProducts.${index}.${column.columnAttributes.prop}`} rules={required}>
+                <el-input
+                  value={row[column.columnAttributes.prop]}
+                  onInput={(val) => { row[column.columnAttributes.prop] = val }}
+                  placeholder="请输入内容"
+                >
+                </el-input>
+              </el-form-item>
+            </div>
+          }
+        },
+        {
+          columnAttributes: {
+            label: '内机条码',
+            prop: 'insideCode'
+          },
+          render: (h, { row, column, index }) => {
+            return <div class="redbordererr">
+              <el-form-item label="" label-width="0px" prop={`punishOrderProducts.${index}.${column.columnAttributes.prop}`} rules={required}>
+                <el-input
+                  value={row[column.columnAttributes.prop]}
+                  onInput={(val) => { row[column.columnAttributes.prop] = val }}
+                  placeholder="请输入内容"
+                >
+                </el-input>
+              </el-form-item>
+            </div>
+          }
+        },
+        {
+          columnAttributes: {
+            label: '外机条码',
+            prop: 'outCode'
+          },
+          render: (h, { row, column, index }) => {
+            return <div class="redbordererr">
+              <el-form-item label="" label-width="0px" prop={`punishOrderProducts.${index}.${column.columnAttributes.prop}`} rules={required}>
+                <el-input
+                  value={row[column.columnAttributes.prop]}
+                  onInput={(val) => { row[column.columnAttributes.prop] = val }}
+                  placeholder="请输入内容"
+                >
+                </el-input>
+              </el-form-item>
+            </div>
+          }
+        },
+      ]
+    },
+    product() {
+      return [{
+        name: 'slot-component',
+        md: 24,
+        formItemAttributes: {
+          label: '',
+          'label-width': '0px',
+          prop: 'punishOrderProducts',
+          errLabel: '产品信息',
+          rules: [...required],
+        },
+        render: (h, { props }) => {
+          return (
+            <div>
+              <zj-table
+                columns={this.productColumns}
+                table-data={this.formData.punishOrderProducts}
+              />
+            </div>
+          )
+        }
+      }]
+    },
+  },
+  methods: {
+    getProductSel() {
+      // 获取品牌
+      getDataDictionary({ "pageNum": 1, "pageSize": -1, "params": [{ "param": "a.status", "compare": "=", "value": "ON" }, { "param": "a.dict_type", "compare": "=", "value": "BRAND" }] }).then(res => {
+        this.orderBrands = res.data.records.map(item => ({
+          value: item.dictCode,
+          label: item.dictValue
+        }))
+      })
+      // 获取产品大类小类
+      getClassifyList({ type: 2, status: true }).then(res => {
+        var classifyListLv2 = []
+        this.classifyList = res.data.map(item => {
+          var { children, ...data } = item
+          classifyListLv2.push(...(children || []))
+          return {
+            ...data
+          }
+        });
+        this.classifyListLv2 = classifyListLv2
+      })
+    }
+  },
+}