hitch-sb-antd/src/views/customize/fieldTemplate/modules/ParamForm.vue

<template>
  <a-modal
    :title="modalTitle"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @cancel="handleCancel"
  >
    <a-form :form="form">
      <row-list :col="2">
        <row-item>
          <a-form-item
            label="显示名称"
            :labelCol="BaseTool.Constant.labelCol"
            :wrapperCol="BaseTool.Constant.wrapperCol"
          >
            <a-input
              v-decorator="['label']"/>
          </a-form-item>
        </row-item>
        <row-item>
          <a-form-item
            label="字段名称"
            :labelCol="BaseTool.Constant.labelCol"
            :wrapperCol="BaseTool.Constant.wrapperCol"
          >
            <a-input
              v-decorator="['fieldName']"/>
          </a-form-item>
        </row-item>
        <row-item>
          <a-form-item
            label="类型"
            :labelCol="BaseTool.Constant.labelCol"
            :wrapperCol="BaseTool.Constant.wrapperCol"
          >
            <a-select
              v-decorator="['type', {rules: [{required: true, message: '类型不能为空'}]}]"
              placeholder="请选择">
              <a-select-option
                v-for="(label,value) in typeMap"
                :key="value"
                :label="label"
                :value="parseInt(value)">{{ label }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </row-item>
        <row-item>
          <a-form-item
            label="是否必填"
            :labelCol="BaseTool.Constant.labelCol"
            :wrapperCol="BaseTool.Constant.wrapperCol"
          >
            <a-select
              v-decorator="['required', {rules: [{required: true, message: '类型不能为空'}]}]"
              placeholder="请选择">
              <a-select-option
                v-for="(label,value) in yesNoMap"
                :key="value"
                :label="label"
                :value="parseInt(value)">{{ label }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </row-item>
        <row-item>
          <a-form-item
            label="显示行数"
            :labelCol="BaseTool.Constant.labelCol"
            :wrapperCol="BaseTool.Constant.wrapperCol"
          >
            <a-input
              v-decorator="['rows', {rules: [{required: true, message: '不能为空'}]}]"/>
          </a-form-item>
        </row-item>
        <row-item>
          <a-form-item
            label="排序"
            :labelCol="BaseTool.Constant.labelCol"
            :wrapperCol="BaseTool.Constant.wrapperCol"
          >
            <a-input
              v-decorator="['sort', {rules: [{required: true, message: '不能为空'}]}]"/>
          </a-form-item>
        </row-item>
        <row-item>
          <a-form-item
            label="最小长度"
            :labelCol="BaseTool.Constant.labelCol"
            :wrapperCol="BaseTool.Constant.wrapperCol"
          >
            <a-input
              v-decorator="['minLength', {rules: [{required: true, message: '不能为空'}]}]"/>
          </a-form-item>
        </row-item>
        <row-item>
          <a-form-item
            label="最大长度"
            :labelCol="BaseTool.Constant.labelCol"
            :wrapperCol="BaseTool.Constant.wrapperCol"
          >
            <a-input
              v-decorator="['maxLength', {rules: [{required: true, message: '不能为空'}]}]"/>
          </a-form-item>
        </row-item>
        <row-item>
          <a-form-item
            label="默认值"
            :labelCol="BaseTool.Constant.labelCol"
            :wrapperCol="BaseTool.Constant.wrapperCol"
          >
            <a-input
              v-decorator="['defaultValue']"/>
          </a-form-item>
        </row-item>
      </row-list>
    </a-form>
    <title-divider title="下拉选择项明细" width="90px"></title-divider>
    <div class="table-operator" style="margin-bottom: 8px;">
      <a-button size="small" type="primary" @click="handleOption">
        <a-icon type="plus"/>
        添加
      </a-button>
      <a-button class="margin-left8" size="small" type="danger" @click="handleDelOption">
        <a-icon type="delete"/>
        删除
      </a-button>
    </div>
    <a-table
      bordered
      :data-source="data"
      :columns="columns"
      tableLayout="auto"
      rowKey="name"
      :row-selection="rowSelection">
      <span slot="action" slot-scope="record">
        <template>
          <a @click="handleOption(record)">修改</a>
          <a-divider type="vertical" />
          <a-popconfirm title="是否要删除该条数据？" @confirm="handleDelOption(record.name)">
            <a>删除</a>
          </a-popconfirm>
        </template>
      </span>
    </a-table>
    <template slot="footer">
      <a-button :loading="confirmLoading" type="primary" @click="save()">保存</a-button>
    </template>
    <option-form ref="optionForm" @ok="handleOptionList" />
  </a-modal>
</template>

<script>
import OptionForm from './OptionForm'
import DetailList from '@/components/tools/DetailList'
import pick from 'lodash.pick'
import Vue from 'vue'
export default {
  name: 'FieldTemplateOptionForm',
  components: {
    OptionForm,
    DetailList
  },
  data () {
    return {
      confirmLoading: false,
      modalTitle: null,
      form: this.$form.createForm(this),
      visible: false,
      data: [],
      // 下拉框map
      yesNoMap: {},
      record: {},
      typeMap: {},
      rowSelection: {
        onChange: (selectedRowKeys, selectedRows) => {
          this.selectedRowKeys = selectedRowKeys
          this.selectedRows = selectedRows
        }
      },
      selectedRowKeys: [],
      selectedRows: [],
      options: {
        rowSelection: {
          selectedRowKeys: this.selectedRowKeys
        }
      },
      // 表头
      columns: [
        {
          title: '序号',
          dataIndex: 'index',
          customRender: (text, record, index) => {
            return index + 1
          }
        },
        {
          title: '参数名称',
          dataIndex: 'name'
        },
        {
          title: '参数值',
          dataIndex: 'value'
        },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' }
        }
      ]
    }
  },
  props: {
  },
  created () {
    // 下拉框map
    this.yesNoMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.YES_NO)
    this.typeMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.CUSTOM_FIELD_TEMPLATE_FILED_TYPE)
  },
  methods: {
    base (record) {
      this.visible = true
      // 如果是空标识添加
      this.modalTitle = '字段设置'
      this.record = record
      this.data = record.optionList || []
      const { form: { setFieldsValue } } = this
      // 日期处理
      this.$nextTick(() => {
        setFieldsValue(Object.assign(pick(record, [
          'label',
          'fieldName',
          'type',
          'required',
          'sort',
          'rows',
          'minLength',
          'maxLength',
          'defaultValue'
        ])))
      })
    },
    save () {
      const { form: { validateFieldsAndScroll } } = this
      this.confirmLoading = true
      validateFieldsAndScroll((errors, values) => {
        if (errors) {
          this.confirmLoading = false
          return
        }
        values.optionList = this.data
        this.handleCancel(values)
      })
    },
    handleCancel (values) {
      this.visible = false
      this.confirmLoading = false
      this.data = []
      this.form.resetFields()
      console.log(values)
      if (this.BaseTool.Object.isNotBlank(values)) {
        console.log(values)
        this.$emit('ok', values)
      }
    },
    handleOption (record) {
      if (record == null) {
        const modal = this.$refs.optionForm
        modal.base()
      } else {
        const modal = this.$refs.optionForm
        modal.base(record)
      }
    },
    handleOptionList (values) {
      let dataSource = [...this.data]
      if (dataSource == null) {
        dataSource = []
      }
      if (values.name == null || values.name === '') {
        return
      }
      let find = false
      console.log('data.length: ' + dataSource.length)
      for (let j = 0; j < dataSource.length; j++) {
        if (values.name === dataSource[j].name) {
          find = true
          this.data = dataSource.map(item => {
            return item.name === values.name ? values : item
          })
          break
        }
      }
      if (!find) {
        dataSource.push(values)
        console.log('data.length: ' + dataSource.length)
        this.data = dataSource
        console.log('data.length: ' + this.data.length)
      }
    },
    handleDelOption (name) {
      const dataSource = [...this.data]
      this.data = dataSource.filter(item => item.name !== name)
    }
  }
}
</script>