hitch-sb-antd/src/views/custom/form/modules/component/modules/Detail.vue

<template>
  <a-card :tab-list="tabList" size="small" style="min-height:600px" :active-tab-key="selectKey" @tabChange="onTabChange">
    <a-form v-show="model.id" size="small" v-if="selectKey === '0'">
      <a-form-item label="标题">
        <a-input v-model="model.label" />
      </a-form-item>
      <template v-if="model.type!=='divider'">
        <a-form-item label="字段名称">
          <a-input v-model="model.value" @blur="valueChange" />
        </a-form-item>
        <a-form-item label="是否必填">
          <a-switch v-model="model.required" />
        </a-form-item>
        <a-form-item label="默认提示" v-if="model.attrs">
          <a-input v-model="model.attrs.placeholder" />
        </a-form-item>
      </template>
      <template v-else>
        <a-form-item label="布局">
          <a-radio-group name="radioGroup" v-model="model.attrs.orientation">
            <a-radio value="left">
              左边
            </a-radio>
            <a-radio value="center">
              中间
            </a-radio>
            <a-radio value="right">
              右边
            </a-radio>
          </a-radio-group>
        </a-form-item>
      </template>
      <!-- 数字输入框 -->
      <template v-if="model.type === 'number'">
        <a-form-item label="最小值">
          <a-input-number v-model="model.min" />
        </a-form-item>
        <a-form-item label="最大值">
          <a-input-number v-model="model.max" />
        </a-form-item>
        <a-form-item label="数值精度">
          <a-input-number v-model="model.precision" />
        </a-form-item>
      </template>
      <!-- 下拉框 -->
      <template v-if="model.type === 'select'">
        <a-form-item label="选项">
          <VueDraggable v-model="model.attrs.options" :animation="150" handle=".handle">
            <div v-for="(item, index) in model.attrs.options" :key="index" class="options">
              <a-space>
                <a-icon class="handle cursor-move" type="unordered-list" />
                <a-input-group compact>
                  <a-input style="width:50%" v-model="item.label" />
                  <a-input style="width:50%" v-model="item.value" />
                </a-input-group>
                <a-icon type="close" @click="deleteOption(index)" />
              </a-space>
            </div>
          </VueDraggable>
          <a-button @click="addOption" style="width:100%"><a-icon type="plus" /></a-button>
        </a-form-item>
      </template>
      <!-- 日期选择 -->
      <template v-if="model.type === 'date'">
        <a-form-item label="是否显示时间">
          <a-switch v-model="model.attrs.showTime" />
        </a-form-item>
        <a-form-item label="时间格式">
          <a-input placeholder="YYYY-MM-DD HH:mm:ss" v-model="model.attrs.format"></a-input>
        </a-form-item>
      </template>
      <!-- 上传 -->
      <template v-if="model.type === 'uploadFile'||model.type === 'uploadImg'">
        <a-form-item label="最大上传数">
          <a-input-number v-model="model.attrs.maxSize" />
        </a-form-item>
      </template>
      <!-- 选择数据 -->
      <template v-if="model.type === 'dataSelect'">
        <a-form-item label="选择表单">
          <a-select v-model="model.attrs.dict" placeholder="请选择" :options="DictCache.getChildrenList('TABLE_MAPPING')" @change="dictChange">
          </a-select>
        </a-form-item>
        <a-form-item label="选择类型">
          <a-radio-group name="radioGroup" v-model="model.attrs.selectType" @change="selectTypeChange">
            <a-radio value="radio">
              单选
            </a-radio>
            <a-radio value="checkbox">
              多选
            </a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="默认字段" v-if="model.attrs.connect.length">
          <a-select v-model="model.attrs.connect[0].columnName" placeholder="请选择">
            <a-select-option v-for="item in tableList" :value="item.columnName" :key="item.columnName">
              {{ item.columnComment }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <!-- <a-form-item label="附加字段" v-if="model.attrs.connect.length&&model.attrs.selectType=='radio'">
          <a-select mode="multiple" v-model="additionalField" placeholder="请选择" @change="additionalFieldChange">
            <a-select-option v-for="item in tableList" :value="item.columnName" :key="item.columnName" :label=" item.columnComment">
              {{ item.columnComment }}
            </a-select-option>
          </a-select>
          <a-button type="primary" @click="addForm()">添加到表单</a-button>
        </a-form-item> -->
      </template>
      <a-popconfirm title="确定删除该组件?" ok-text="确定" cancel-text="取消" @confirm="deleteModel">
        <a-button type="danger" style="width:100%">删除</a-button>
      </a-popconfirm>
    </a-form>
    <a-form size="small" v-if="selectKey === '1'">
      <a-form-item label="布局">
        <a-radio-group name="radioGroup" v-model="config.layout">
          <a-radio :value="1">
            单列
          </a-radio>
          <a-radio :value="2">
            双列
          </a-radio>
          <a-radio :value="3">
            三列
          </a-radio>
        </a-radio-group>
      </a-form-item>
    </a-form>
    <BindTable ref="bindTable" @bind="handleBind" />
  </a-card>
</template>

<script>
import { VueDraggable } from 'vue-draggable-plus'
import { getTableInfos } from '@/api/custom/form'
import BindTable from './BindTable.vue'
export default {
  components: {
    VueDraggable,
    BindTable,
  },
  data() {
    return {
      model: {
        attrs: {
          placeholder: '',
        },
      },
      config: {},
      selectKey: '0',
      tabList: [
        {
          key: '0',
          tab: '字段属性',
        },
        {
          key: '1',
          tab: '表单属性',
        },
      ],
      tableList: [],
      additionalField: [],
    }
  },
  created() {},
  methods: {
    base(val, config) {
      this.model = val
      this.config = config
      if (this.model.attrs.dict !== undefined && this.model.attrs.dict !== '') {
        this.dictChange(this.model.attrs.dict)
      }
      this.additionalField =
        val.attrs.connect && val.attrs.connect.length > 1
          ? val.attrs.connect.slice(1, val.attrs.connect.length).map((item) => item.columnName)
          : []
    },
    addOption() {
      this.model.attrs.options.push({
        label: '选项' + (this.model.attrs.options.length + 1),
        value: 'newValue' + (this.model.attrs.options.length + 1),
      })
    },
    deleteOption(i) {
      this.model.attrs.options.splice(i, 1)
    },
    deleteModel() {
      this.$emit('delete', this.model)
    },
    dictChange(tableName) {
      getTableInfos({ tableName }).then((res) => {
        this.tableList = res.data
        if (this.model.attrs.connect.length === 0) {
          this.model.attrs.connect.push({
            bind: this.model.value,
            columnName: 'id',
            columnComment: 'id',
          })
        }
      })
    },
    valueChange() {
      if (this.model.type === 'dataSelect' && this.model.attrs.connect.length > 0) {
        this.model.attrs.connect[0].bind = this.model.value
      }
    },
    selectTypeChange() {
      this.model.attrs.connect.splice(1)
      this.additionalField = []
    },
    additionalFieldChange(val, e) {
      const arr = e.map((item) => {
        return {
          bind: item.key,
          columnName: item.key,
          columnComment: item.componentOptions.propsData.label,
        }
      })
      this.model.attrs.connect.splice(1, this.model.attrs.connect.length - 1, ...arr)
    },
    addForm() {
      this.$emit('addForm', this.model.attrs.connect.slice(1, this.model.attrs.connect.length))
    },
    bindTable(tableName) {
      this.$refs.bindTable.base(this.tableList)
    },
    handleBind(val) {
      this.model.attrs.connect = val
    },
    onTabChange(key) {
      this.selectKey = key
    },
  },
}
</script>

<style lang="less" scoped>
.options {
  margin-bottom: 5px;
}
</style>