jsm-mall-front/src/views/valueAddedService/valueAddedConfig/index.vue

<template>
  <template-page
    ref="pageRef"
    :get-list="getList"
    :exportList="exportList"
    :table-attributes="tableAttributes"
    :table-events="tableEvents"
    :options-evens-group="optionsEvensGroup"
    :moreParameters="moreParameters"
    :column-parsing="columnParsing"
    :operation="operation()"
    :replaceOrNotMap="false"
  >
    <div class="cartographer">
      <el-dialog title="增值服务配置" width="100%" :modal="false" :visible.sync="formDialog" :before-close="formCancel">
        <zj-form-container v-if="formDialog" ref="formRef" :form-data="formData" :styleSwitch="false">
          <zj-form-module
            title="新增"
            label-width="120px"
            :showPackUp="false"
            :form-data="formData"
            :form-items="formItems"
          >
          </zj-form-module>
        </zj-form-container>
        <div slot="footer" class="dialog-footer">
          <el-button size="mini" @click="formCancel">取 消</el-button>
          <el-button size="mini" @click="formConfirm" type="primary">确定</el-button>
        </div>
      </el-dialog>
    </div>
  </template-page>
</template>

<script>
import TemplatePage from '@/components/template/template-page-1.vue'
import import_mixin from '@/components/template/import_mixin.js'
import {
  increConfigList,
  increConfigListExport,
  increConfigDetail,
  increConfigAdd,
  increConfigUpdate,
  increConfigUpOrDown
} from '@/api/valueAddedConfig.js'
import { required, mobileRequired, mobile, httpUrl, email } from '@/components/template/rules_verify.js'
import { getClassifyList } from '@/api/goods'
import { getDataDictionary } from '@/api/dataDictionary.js'
import operation_mixin from '@/components/template/operation_mixin.js'
import { getWebsit } from '@/api/customerManagement.js'
export default {
  props: {
    storageType: {
      type: String,
      default: ''
    }
  },
  components: { TemplatePage },
  mixins: [import_mixin, operation_mixin],
  data() {
    return {
      // 表格属性
      tableAttributes: {
        // 启用勾选列
        selectColumn: false
      },
      // 表格事件
      tableEvents: {
        'selection-change': this.selectionChange
      },
      // 勾选选中数据
      recordSelected: [],
      formData: {
        companyWechatId: '',
        companyWechatName: '',
        intro: '',
        reason: '',
        remark: '',
        status: true,
        type: '',
        usedType: '',
        pgIncreItems: [],
        pgIncreWebsits: []
      },
      formDialog: false,
      isEditIndex: -1,
      orderBrands: [],
      classifyList: [],
      classifyListLv2: [],
      clickLook: true,
      websitList: [],
      websitIndex: -1
    }
  },
  computed: {
    // 事件组合
    optionsEvensGroup() {
      return [
        [
          [
            this.optionsEvensAuth('add', {
              click: () => {
                this.openForm()
              }
            })
          ]
        ]
      ]
    },
    // 更多参数
    moreParameters() {
      return []
    },
    columns() {
      return [
        {
          columnAttributes: {
            label: '品牌',
            prop: 'brandId'
          },
          render: (h, { row, column, index }) => {
            return this.isEditIndex == index ? (
              <div class="redbordererr">
                <el-form-item
                  label=""
                  label-width="0px"
                  prop={`pgIncreItems.${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>
            ) : (
              <div style="padding-left:10px">{row.brandName}</div>
            )
          }
        },
        {
          columnAttributes: {
            label: '产品大类',
            prop: 'mainId'
          },
          render: (h, { row, column, index }) => {
            return this.isEditIndex == index ? (
              <div class="redbordererr">
                <el-form-item
                  label=""
                  label-width="0px"
                  prop={`pgIncreItems.${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.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>
            ) : (
              <div style="padding-left:10px">{row.mainName}</div>
            )
          }
        },
        {
          columnAttributes: {
            label: '服务内容',
            prop: 'content'
          },
          render: (h, { row, column, index }) => {
            return this.isEditIndex == index ? (
              <div class="redbordererr">
                <el-form-item
                  label=""
                  label-width="0px"
                  prop={`pgIncreItems.${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>
            ) : (
              <div style="padding-left:10px">{row[column.columnAttributes.prop]}</div>
            )
          }
        },
        {
          columnAttributes: {
            label: '使用限值',
            prop: 'limitNum'
          },
          render: (h, { row, column, index }) => {
            return this.isEditIndex == index ? (
              <div class="redbordererr">
                <el-form-item
                  label=""
                  label-width="0px"
                  prop={`pgIncreItems.${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>
            ) : (
              <div style="padding-left:10px">{row[column.columnAttributes.prop]}</div>
            )
          }
        },
        {
          columnAttributes: {
            label: '服务金额（元）',
            prop: 'amount'
          },
          render: (h, { row, column, index }) => {
            return this.isEditIndex == index ? (
              <div class="redbordererr">
                <el-form-item
                  label=""
                  label-width="0px"
                  prop={`pgIncreItems.${index}.${column.columnAttributes.prop}`}
                  rules={required}
                >
                  <el-input
                    type="number"
                    value={row[column.columnAttributes.prop]}
                    onInput={val => {
                      row[column.columnAttributes.prop] = val
                      if (val && row.workerAmount && Number(row.workerAmount) > Number(val)) {
                        row.workerAmount = val
                      }
                    }}
                    placeholder="请输入内容"
                  ></el-input>
                </el-form-item>
              </div>
            ) : (
              <div style="padding-left:10px">{row[column.columnAttributes.prop]}</div>
            )
          }
        },
        {
          columnAttributes: {
            label: '师傅分成金额',
            prop: 'workerAmount'
          },
          render: (h, { row, column, index }) => {
            return this.isEditIndex == index ? (
              <div class="redbordererr">
                <el-form-item
                  label=""
                  label-width="0px"
                  prop={`pgIncreItems.${index}.${column.columnAttributes.prop}`}
                  rules={required}
                >
                  <el-input
                    type="number"
                    value={row[column.columnAttributes.prop]}
                    onInput={val => {
                      row[column.columnAttributes.prop] =
                        val && row.amount && Number(val) > Number(row.amount) ? row.amount : val
                    }}
                    placeholder="请输入内容"
                  ></el-input>
                </el-form-item>
              </div>
            ) : (
              <div style="padding-left:10px">{row[column.columnAttributes.prop]}</div>
            )
          }
        },
        {
          columnAttributes: {
            label: '网点分成金额',
            prop: 'websitAmount'
          },
          render: (h, { row, column, index }) => {
            row[column.columnAttributes.prop] = (Number(row['amount']) - Number(row['workerAmount'])).toFixed(2)
            return <div style="padding-left:10px">{row[column.columnAttributes.prop]}</div>
          }
        },
        {
          columnAttributes: {
            label: '创建人',
            prop: 'createBy'
          }
        },
        {
          columnAttributes: {
            label: '创建时间',
            prop: 'createTime'
          }
        },
        {
          columnAttributes: {
            label: '修改人',
            prop: 'updateBy'
          }
        },
        {
          columnAttributes: {
            label: '修改时间',
            prop: 'updateTime'
          }
        },
        {
          columnAttributes: {
            label: '操作'
          },
          render: (h, { row, column, index }) => {
            return (
              <div style="padding-left:10px">
                <el-button
                  type="text"
                  onClick={() => {
                    if (this.isEditIndex === index) {
                      this.isEditIndex = -1
                    }
                    this.formData.pgIncreItems.splice(index, 1)
                  }}
                >
                  删除
                </el-button>
                {this.isEditIndex == index && (
                  <el-button
                    type="text"
                    onClick={() => {
                      if (this.panduancp()) {
                        this.$refs.formRef.validateField(this.getVfyKey(index), (valid, invalidFields, errLabels) => {
                          if (valid) {
                            this.isEditIndex = -1
                          }
                        })
                      }
                    }}
                  >
                    确定
                  </el-button>
                )}
                {this.isEditIndex == -1 && (
                  <el-button
                    type="text"
                    onClick={() => {
                      this.isEditIndex = index
                    }}
                  >
                    编辑
                  </el-button>
                )}
              </div>
            )
          }
        }
      ]
    },
    formItems() {
      return [
        {
          name: 'slot-component',
          md: 16,
          formItemAttributes: { label: '', prop: '' },
          render: (h, { props }) => {
            return null
          }
        },
        {
          name: 'el-select',
          md: 8,
          options: [
            { label: '延保', value: 1 },
            { label: '清洗', value: 2 }
          ],
          attributes: {
            placeholder: '请选择',
            clearable: true,
            filterable: true
          },
          formItemAttributes: {
            label: '服务类型',
            prop: 'type',
            rules: [...required]
          },
          events: {
            change: val => {
              if (val == 1) {
                this.formData.usedType = 'YEAR'
              }
            }
          }
        },
        {
          name: 'slot-component',
          md: 16,
          formItemAttributes: { label: '', prop: '' },
          render: (h, { props }) => {
            return null
          }
        },
        {
          name: 'el-select',
          md: 8,
          options: [
            { label: '使用次数', value: 'COUNT' },
            { label: '使用年限', value: 'YEAR' }
          ],
          attributes: {
            placeholder: '请选择',
            clearable: true,
            filterable: true,
            disabled: this.formData.type == 1
          },
          formItemAttributes: {
            label: '使用类型',
            prop: 'usedType',
            rules: [...required]
          }
        },
        {
          name: 'slot-component',
          md: 16,
          formItemAttributes: { label: '', prop: '' },
          render: (h, { props }) => {
            return null
          }
        },
        {
          name: 'el-input',
          md: 8,
          name: 'el-radio',
          options: [
            { label: '上架', value: true },
            { label: '下架', value: false }
          ],
          formItemAttributes: {
            label: '状态',
            prop: 'status',
            rules: [...required]
          }
        },
        {
          md: 24,
          isShow: true,
          name: 'slot-component',
          formItemAttributes: {
            label: '服务内容',
            prop: 'pgIncreItems',
            rules: [...required]
          },
          render: (h, { props, onInput }) => {
            var { value } = props
            return (
              <div>
                <div style="margin-bottom:8px">
                  <el-button
                    onClick={() => {
                      if (this.panduancp()) {
                        if (this.formData.pgIncreItems.length == 0) {
                          this.formData.pgIncreItems.push({
                            amount: '',
                            brandId: '',
                            brandName: '',
                            content: '',
                            limitNum: '',
                            mainId: '',
                            mainName: '',
                            websitAmount: '',
                            workerAmount: ''
                          })
                          this.isEditIndex = this.formData.pgIncreItems.length - 1
                        } else {
                          this.$refs.formRef.validateField(
                            this.getVfyKey(this.isEditIndex),
                            (valid, invalidFields, errLabels) => {
                              if (valid) {
                                this.formData.pgIncreItems.push({
                                  amount: '',
                                  brandId: '',
                                  brandName: '',
                                  content: '',
                                  limitNum: '',
                                  mainId: '',
                                  mainName: '',
                                  websitAmount: '',
                                  workerAmount: ''
                                })
                                this.isEditIndex = this.formData.pgIncreItems.length - 1
                              }
                            }
                          )
                        }
                      }
                    }}
                  >
                    添加
                  </el-button>
                </div>
                <zj-table
                  columns={this.columns}
                  tableData={this.formData.pgIncreItems}
                  tableAttributes={{
                    size: 'mini',
                    border: true
                  }}
                />
              </div>
            )
          }
        },
        {
          name: 'el-input',
          md: 24,
          attributes: {
            disabled: false,
            placeholder: '请输入',
            type: 'textarea',
            autosize: { minRows: 2, maxRows: 4 },
            maxlength: 50,
            'show-word-limit': true
          },
          formItemAttributes: {
            label: '服务介绍',
            prop: 'intro',
            rules: [...required]
          }
        },
        {
          md: 24,
          name: 'slot-component',
          formItemAttributes: {
            label: '服务说明',
            prop: 'reason',
            rules: [...required]
          },
          render: (h, { props, onInput }) => {
            var { value } = props
            return <v-quill-editor value={value} onInput={onInput} />
          }
        },
        {
          md: 24,
          name: 'slot-component',
          formItemAttributes: {
            label: '服务网点',
            prop: 'pgIncreWebsits',
            rules: [...required]
          },
          render: (h, { props, onInput }) => {
            var { value } = props
            return (
              <div>
                <div style="margin-bottom:8px">
                  <el-button
                    onClick={() => {
                      this.formData.pgIncreWebsits.push({
                        websitId: '',
                        linkName: '',
                        websitPhone: '',
                        address: ''
                      })
                      this.websitIndex = this.formData.pgIncreWebsits.length - 1
                    }}
                  >
                    添加
                  </el-button>
                </div>
                <zj-table
                  columns={[
                    {
                      columnAttributes: {
                        label: '网点名称',
                        prop: 'websitId'
                      },
                      render: (h, { row, column, index }) => {
                        return (
                          <div>
                            <el-form-item
                              label=""
                              label-width="0px"
                              prop={`pgIncreWebsits.${index}.${column.columnAttributes.prop}`}
                              rules={required}
                            >
                              <el-select
                                value={row[column.columnAttributes.prop]}
                                onInput={val => {
                                  row[column.columnAttributes.prop] = val
                                }}
                                disabled={!(this.websitIndex == index)}
                                onChange={val => {
                                  if (val) {
                                    var data = this.websitList.find(item => item.value == val)
                                    row.linkName = data.data.linkName
                                    row.websitPhone = data.data.websitPhone
                                    row.address = data.data.address
                                  } else {
                                    row.linkName = ''
                                    row.websitPhone = ''
                                    row.address = ''
                                  }
                                }}
                                placeholder="请选择"
                              >
                                {this.websitList
                                  .filter(
                                    item =>
                                      row.websitId == item.value ||
                                      !this.formData.pgIncreWebsits.find(val => val.websitId == item.value)
                                  )
                                  .map((item, index_) => (
                                    <el-option key={index_} label={item.label} value={item.value}></el-option>
                                  ))}
                              </el-select>
                            </el-form-item>
                          </div>
                        )
                      }
                    },
                    {
                      columnAttributes: {
                        label: '联系人',
                        prop: 'linkName'
                      }
                    },
                    {
                      columnAttributes: {
                        label: '联系电话',
                        prop: 'websitPhone'
                      }
                    },
                    {
                      columnAttributes: {
                        label: '地址',
                        prop: 'address'
                      }
                    },
                    {
                      columnAttributes: {
                        label: '操作'
                      },
                      render: (h, { row, column, index }) => {
                        return (
                          <div style="padding-left:10px">
                            {this.websitIndex == index ? (
                              <el-button
                                type="text"
                                onClick={() => {
                                  this.websitIndex = -1
                                }}
                              >
                                确定
                              </el-button>
                            ) : null}
                            {this.websitIndex != index ? (
                              <el-button
                                type="text"
                                onClick={() => {
                                  this.websitIndex = index
                                }}
                              >
                                编辑
                              </el-button>
                            ) : null}
                            <el-button
                              type="text"
                              onClick={() => {
                                if (this.websitIndex == index) {
                                  this.websitIndex = -1
                                }
                                this.formData.pgIncreWebsits.splice(index, 1)
                              }}
                            >
                              删除
                            </el-button>
                          </div>
                        )
                      }
                    }
                  ]}
                  tableData={this.formData.pgIncreWebsits}
                  tableAttributes={{
                    size: 'mini',
                    border: true
                  }}
                />
              </div>
            )
          }
        },
        {
          name: 'el-input',
          md: 24,
          attributes: { disabled: false, placeholder: '请输入', type: 'textarea' },
          formItemAttributes: {
            label: '备注',
            prop: 'remark',
            rules: []
          }
        }
      ]
    }
  },
  methods: {
    // 列表请求函数
    getList: increConfigList,
    // 列表导出函数
    exportList: increConfigListExport,
    // 表格列解析渲染数据更改
    columnParsing(item, defaultData) {
      return defaultData
    },
    // 监听勾选变化
    selectionChange(data) {
      this.recordSelected = data
    },
    // 表格操作列
    operation() {
      return this.operationBtn({
        detail: {
          btnType: 'text',
          click: ({ row, index, column }) => {
            this.getDetail(row.id)
          }
        }
      })
    },
    panduancp() {
      try {
        this.formData.pgIncreItems.map((row, index) => {
          this.formData.pgIncreItems.map((item, index_) => {
            if (
              `${row.brandId}_${row.mainId}_${row.content}` == `${item.brandId}_${item.mainId}_${item.content}` &&
              index_ != index
            ) {
              throw new Error('')
            }
          })
        })
      } catch (error) {
        this.$message.warning('服务内容重复')
        return false
      }
      return true
    },
    getDetail(id) {
      increConfigDetail({ id }).then(res => {
        Object.assign(this.formData, res.data, {
          pgIncreWebsits: res.data.pgIncreWebsits || []
        })
        this.openForm()
      })
    },
    getVfyKey(index, bool = true) {
      return [
        ...(() => {
          if (bool) {
            return [`pgIncreItems`]
          }
          return []
        })(),
        ...(() => {
          if (index > -1) {
            return [
              `pgIncreItems.${index}.brandId`,
              `pgIncreItems.${index}.mainId`,
              `pgIncreItems.${index}.content`,
              `pgIncreItems.${index}.limitNum`,
              `pgIncreItems.${index}.amount`,
              `pgIncreItems.${index}.websitAmount`,
              `pgIncreItems.${index}.workerAmount`
            ]
          }
          return []
        })()
      ]
    },
    openForm() {
      Promise.all([
        getDataDictionary({
          pageNum: 1,
          pageSize: -1,
          params: [
            { param: 'a.status', compare: '=', value: 'ON' },
            { param: 'a.dict_type', compare: '=', value: 'BRAND' }
          ]
        }),
        getClassifyList({ type: 2, status: true }),
        getWebsit({ isIncre: true, status: true })
      ]).then(([res1, res2, res3]) => {
        // 获取品牌
        this.orderBrands = res1.data.records.map(item => ({
          value: item.dictCode,
          label: item.dictValue
        }))
        // 获取产品大类小类
        var classifyListLv2 = []
        this.classifyList = res2.data.map(item => {
          var { children, ...data } = item
          classifyListLv2.push(...(children || []))
          return {
            ...data
          }
        })
        this.classifyListLv2 = classifyListLv2

        this.websitList = res3.data.map(item => ({
          label: item.name,
          value: item.websitId,
          data: item
        }))

        var { companyWechatId, companyName } = JSON.parse(localStorage.getItem('greemall_user'))
        this.formData.companyWechatId = companyWechatId
        this.formData.companyWechatName = companyName
        // 打开弹窗
        this.formDialog = true
      })
    },
    // 关闭弹窗
    formCancel() {
      this.$refs.formRef.$refs.inlineForm.clearValidate()
      this.$data.formData = this.$options.data().formData
      this.isEditIndex = -1
      this.formDialog = false
    },
    formConfirm() {
      if (this.clickLook && this.panduancp()) {
        this.$refs.formRef.validate((valid, invalidFields, errLabels) => {
          if (valid) {
            this.clickLook = false
            ;[increConfigAdd, increConfigUpdate]
              [this.formData.id ? 1 : 0]({
                ...this.formData
              })
              .then(res => {
                this.$message({ type: 'success', message: `成功!` })
                this.formCancel()
                this.$refs.pageRef.refreshList()
                this.clickLook = true
              })
              .catch(() => {
                this.clickLook = true
              })
          }
        })
      } else {
        this.$message.warning('服务内容没有确认')
      }
    }
  }
}
</script>

<style lang="scss">
.redbordererr {
  .el-form-item {
    margin: 0 !important;
    overflow: hidden;
  }
}
</style>