zfire-newmall-admin/src/views/mallManagement/setActivity/formModule.vue

<template>
  <zj-form-module title="活动网点" label-width="120px" :form-data="item" :form-items="formItems"> </zj-form-module>
</template>

<script>
import editTable from '@/components/template/editTable.js'
import { required, mobileRequired, mobile, httpUrl, email } from '@/components/template/rules_verify.js'
import { string } from '@zjlib/element-plugins'
export default {
  props: {
    item: {
      type: Object,
      default: () => ({})
    },
    typeView: {
      type: [String, Number],
      default: 0
    }
  },
  mixins: [editTable],
  data() {
    return {}
  },
  computed: {
    formItems() {
      return [
        {
          name: 'slot-component',
          md: 24,
          formItemAttributes: {
            label: '',
            'label-width': '0px',
            prop: 'promotionQuestionnaireQrcodes',
            rules: []
          },
          render: (h, { props, onInput }) => {
            var { value } = props
            return this.convertTableJson(
              value,
              [
                {
                  columnAttributes: {
                    label: '网点名称',
                    prop: 'websitName'
                  },
                  editRender: (h, { row, column, index }) => {
                    return (
                      <div class="redbordererr">
                        <el-form-item
                          label=""
                          label-width="0px"
                          prop={`promotionQuestionnaireQrcodes.${index}.${column.columnAttributes.prop}`}
                          rules={[{ required: true, message: '请填写', trigger: 'blur' }]}
                        >
                          <el-input
                            value={row[column.columnAttributes.prop]}
                            onInput={val => {
                              row[column.columnAttributes.prop] = val
                            }}
                            placeholder="请输入内容"
                          ></el-input>
                        </el-form-item>
                      </div>
                    )
                  },
                  viewRender: (h, { row, column, index }) => {
                    return <div style="padding-left:10px">{row[column.columnAttributes.prop]}</div>
                  }
                },
                {
                  columnAttributes: {
                    label: '活动二维码',
                    prop: 'qrcode',
                    width: 160
                  },
                  render: (h, { row, column, index }) => {
                    return (
                      <div class="redbordererr">
                        {row[column.columnAttributes.prop] ? (
                          <el-image
                            src={row[column.columnAttributes.prop]}
                            preview-src-list={[row[column.columnAttributes.prop]]}
                            fit="fit"
                            style="width:80px;height:80px;"
                          />
                        ) : null}
                      </div>
                    )
                  }
                }
              ],
              {
                isEdit: this.qx(this.item),
                isAdd: this.qx(this.item),
                isUpdate: false,
                isDel: ({ row, column, index }) => {
                  return !row.id
                }
              },
              {
                add: () => {
                  this.item.promotionQuestionnaireQrcodes.push({
                    websitName: '',
                    qrcode: ''
                  })
                  this.isEditTableIndex = this.item.promotionQuestionnaireQrcodes.length - 1
                },
                delete: ({ row, column, index }, cb) => {
                  if (this.isEditTableIndex == index) {
                    this.isEditTableIndex = -1
                  } else if (this.isEditTableIndex > index) {
                    this.isEditTableIndex--
                  }
                  cb && cb()
                },
                verify: ({ row, column, index }, isEditTableIndex) => {
                  return new Promise(r => {
                    if (isEditTableIndex > -1) {
                      this.acquireVerify(this, 'dqangqianyemian')(
                        [`promotionQuestionnaireQrcodes.${isEditTableIndex}.websitName`],
                        v => {
                          if (v) {
                            r(true)
                          } else {
                            r(false)
                          }
                        }
                      )
                      r(true)
                    } else {
                      r(true)
                    }
                  })
                },
                btnSlot: ({ row, column, index }) => {
                  if (row.id && row.qrcode) {
                    return (
                      <el-button
                        type="text"
                        onClick={() => {
                          window.open(row.qrcode)
                        }}
                      >
                        下载二维码
                      </el-button>
                    )
                  }
                  return null
                }
              }
            )
          }
        }
      ]
    }
  },
  methods: {
    qx(item) {
      return (
        !!this.typeView &&
        (!item.id || !!~[0, 1].indexOf(item.status) || !!~['待生效', '生效中'].indexOf(item.statusText))
      )
    },
    acquireVerify(v, name) {
      if (v.$parent[name]) {
        return v.$parent[name]
      } else {
        return this.acquireVerify(v.$parent, name)
      }
    }
  }
}
</script>

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