db-init-web/src/views/project/column.vue

<template>
  <div id="column">
    <el-row>
      <el-col :span="23" style="text-align: right; padding: 10px 0">
        <el-affix target=".backCard" :offset="50">
          <el-button type="primary" size="mini" @click="toAdd">添加字段</el-button>
        </el-affix>
      </el-col>
    </el-row>
    <el-table :data="value" style="width: 100%" stripe border fit>
      <el-table-column align="center" prop="title" label="字段名">
        <template #default="{ row }">
          <el-input v-model="row.title"></el-input>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="zh" label="字段中文">
        <template #default="{ row }">
          <el-input v-model="row.zh"></el-input>
        </template>
      </el-table-column>
      <el-table-column align="center" label="字段类型">
        <template #default="{ row }">
          <el-select v-model="row.type" placeholder="请选择字段类型">
            <el-option v-for="(i, index) in columnType" :key="`type-${index}`" :label="i.label" :value="i.value"> </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="def" label="默认值">
        <template #default="{ row }">
          <el-input v-model="row.def"></el-input>
        </template>
      </el-table-column>
      <el-table-column align="center" label="是否为索引">
        <template #default="{ row }">
          <el-radio-group v-model="row.index">
            <el-radio v-for="(i, index) in required" :key="`index-${index}`" :label="i.value">{{ i.value ? '是' : '否' }} </el-radio>
          </el-radio-group>
        </template>
      </el-table-column>
      <el-table-column align="center" label="是否必填">
        <template #default="{ row }">
          <el-radio-group v-model="row.required">
            <el-radio v-for="(i, index) in required" :key="`req-${index}`" :label="i.value">{{ i.label }}</el-radio>
          </el-radio-group>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="ref" label="关联表">
        <template #default="{ row }">
          <el-input v-model="row.ref"></el-input>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="getProp" label="关联显示字段(使用分号(;)分隔)">
        <template #default="{ row }">
          <el-input v-model="row.getProp"></el-input>
        </template>
      </el-table-column>
      <el-table-column align="center" label="描述">
        <template #default="{ row }">
          <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 2 }" v-model="row.remark"></el-input>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template #default="{ $index }">
          <el-row justify="space-around">
            <el-col :span="8">
              <el-link :underline="false" size="mini" type="danger" @click="toDelete($index)">删除</el-link>
            </el-col>
            <el-col :span="8" v-if="$index > 0">
              <el-link :underline="false" size="mini" type="primary" @click="toMove('up', $index)"> 向上</el-link>
            </el-col>
            <el-col :span="8" v-if="$index < value.length - 1">
              <el-link :underline="false" size="mini" type="primary" @click="toMove('down', $index)"> 向下</el-link>
            </el-col>
          </el-row>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import optionQuery from '@/api/options';
const _ = require('lodash');
import { defineComponent } from 'vue';
export default defineComponent({
  name: 'column',
  props: {
    value: Array,
  },
  emits: ['update:value'],
  data() {
    return {
      columnType: [],
      required: [],
    };
  },
  setup(props, context) {
    return optionQuery();
  },
  created() {
    this.init();
  },
  methods: {
    toAdd() {
      let def = this.columnType.find((f) => f.default);
      let obj = { index: false, required: false };
      if (def) obj.type = def.value;
      else obj.type = _.get(_.head(this.columnType), 'value');
      this.$emit('update:value', [...this.value, obj]);
    },
    async init() {
      const arr = ['columnType', 'required'];
      const res = await this.query(arr);
      for (const i of arr) {
        this[i] = res[i];
      }
    },
    toDelete(index) {
      this.value.splice(index, 1);
    },
    toMove(type, index) {
      const list = _.cloneDeep(this.value);
      const source = _.cloneDeep(this.value[index]);
      const targetIndex = type === 'up' ? index - 1 : index + 1;
      const target = _.cloneDeep(this.value[targetIndex]);
      list.splice(targetIndex, 1, source);
      list.splice(index, 1, target);
      this.$emit('update:value', list);
    },
  },
});
</script>

<style lang="less" scoped></style>