dvcp_v2_webapp/packages/2.0.5/AppForm/components/FormConfig.vue

<template>
  <div class="basicInfo">
    <ai-card title="搜索字段" class="search-wrapper">
      <template #content>
        <el-checkbox-group v-model="queryFields">
          <el-checkbox
            :label="`${item.fieldDbName}~${item.fieldName}`"
            v-for="(item, index) in tableInfos"
            :key="index">
            {{ item.fieldName }}
          </el-checkbox>
        </el-checkbox-group>
      </template>
    </ai-card>
    <ai-card title="表格字段">
      <template #content>
        <div class="ai-table">
          <div class="el-table el-table--border ai-header__border">
            <el-scrollbar>
              <table cellspacing="0" cellpadding="0" border="0" class="el-table__body">
                <draggable element="thead" animation="500" class="el-table__header is-leaf ai-table__header" :sort="true" v-model="showFields">
                  <th v-for="(item, index) in showFields" style="background: #f3f4f5; text-align: center;" class="ai-table__header" :key="index">{{ item.fieldName }}</th>
                </draggable> 
                <tbody element="tbody">
                  <tr>
                    <td @click="handleShow(index, item.isShow)" v-for="(item, index) in showFields" :key="index">{{ item.isShow ? '已显示' : '已隐藏' }}</td>
                  </tr>
                </tbody> 
              </table>
            </el-scrollbar>
          </div>
        </div>
      </template>
    </ai-card>
    <ai-card title="排序和操作按钮">
      <template #content>
        <el-form ref="form" class="ai-form" :model="form" label-width="110px" label-position="right">
          <el-form-item label="排序字段" prop="field">
            <el-select
              size="small"
              placeholder="默认按创建时间排序"
              clearable
              v-model="form.field">
              <el-option
                v-for="(filed, index) in tableInfos"
                :key="index"
                :label="filed.fieldName"
                :value="`${filed.fieldDbName}~${filed.fieldName}`">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="排序类型" prop="orderType" :rules="[{ required: true, message: '请输入排序类型', trigger: 'change' }]">
            <el-radio-group v-model="form.orderType">
              <el-radio label="asc">升序</el-radio>
              <el-radio label="desc">降序</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="按钮配置" prop="btns" style="width: 100%;" :rules="[{ required: true, message: '请输入按钮配置', trigger: 'change' }]">
            <el-checkbox-group v-model="form.btns">
              <el-checkbox label="insertEnable">添加</el-checkbox>
              <el-checkbox label="importEnable">导入</el-checkbox>
              <el-checkbox label="exportEnalbe">导出</el-checkbox>
              <el-checkbox label="editEnable">编辑</el-checkbox>
              <el-checkbox label="deleteEnable">删除</el-checkbox>
              <el-checkbox label="batchDelEnable">批量删除</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-form>
      </template>
    </ai-card>
  </div>
</template>

<script>
  import draggable from 'vuedraggable'
  export default {
    name: 'configForm',

    props: {
      tableInfos: Array,
      btns: Array,
      showListFields: Array,
      orderFields: Array,
      fuzzyQueryFields: Array
    },

    components: {
      draggable
    },

    data () {
      return {
        queryFields: [],
        tableData: [{}],
        btnKeys: ['insertEnable', 'importEnable', 'exportEnalbe', 'editEnable', 'deleteEnable', 'batchDelEnable'],
        form: {
          btns: [],
          orderType: 'asc',
          field: ''
        },
        showFields: []
      }
    },

    mounted () {
      const showIds = this.showListFields.map(v => v.fieldDbName)
      this.showFields = JSON.parse(JSON.stringify(this.tableInfos)).map(item => {
        item.isShow = showIds.indexOf(item.fieldDbName) > -1 ? true : false

        return item
      })

      if (!this.showListFields.length) {
        this.showFields.map(v => {
          v.isShow = true
          return v
        })
      }

      this.tableInfos.map(item => {
        this.tableData[0][item.fieldDbName] = '删除'
      })

      if (this.btns.length) {
        this.form.btns = this.btns
      }

      const tableInfosIds = this.tableInfos.map(v => v.fieldDbName)

      if (this.orderFields.length) {
        let arr = this.orderFields.filter(v => {
          return tableInfosIds.indexOf(v.fieldDbName) > -1
        }).map(item => {
          return `${item.fieldDbName}~${item.fieldName}`
        })

        if (arr.length) {
          this.form.field = arr[0]
        }
      }
      if (this.fuzzyQueryFields.length) {
        this.queryFields = this.fuzzyQueryFields.filter(v => {
          return tableInfosIds.indexOf(v.fieldDbName) > -1
        }).map(item => {
          return `${item.fieldDbName}~${item.fieldName}`
        })
      }
    },

    methods: {
      validate () {
        let result = false
        this.$refs.form.validate(valid => {
          result = valid
        })

        if (!result) {
          return false
        }

        const btns = {}
        this.btnKeys.forEach(item => {
          btns[item] = this.form.btns.indexOf(item) > -1 ? 1 : 0 
        })

        return {
          btns,
          orderFields: [{
            fieldName: this.form.field.split('~')[1],
            fieldDbName: this.form.field.split('~')[0],
            orderType: this.form.orderType
          }],
          showListFields: this.showFields.filter(v => v.isShow).map((v, index) => {
            return {
              fieldName: v.fieldName,
              fieldDbName: v.fieldDbName,
              showListIndex: index
            }
          }),
          fuzzyQueryFields: this.queryFields.map(v => {
            return {
              fieldName: v.split('~')[1],
              fieldDbName: v.split('~')[0]
            }
          })
        }
      },

      handleShow (index, isShow) {
        const total = this.showFields.map(v => v.isShow).filter(v => !!v)
        if (total.length <= 1 && isShow) {
          return this.$message.error('表格列数不能小于1')
        }

        this.$set(this.showFields[index], 'isShow', !isShow)
      }
    }
  }
</script>

<style scoped lang="scss">
  .basicInfo {
    .search-wrapper {
      ::v-deep .el-checkbox-group {
        display: flex;
        flex-wrap: wrap;

        .el-checkbox {
          width: 16.66%;
          margin-bottom: 10px;
        }
      }
    }
  }

  .ai-table {
    .el-table--border {
      border: 1px solid #d0d4dc;
      border-bottom: none;
      border-right: none;
    }
    table {
      min-width: 100%;
    }

    th, tr {
      min-width: 100px;
      cursor: move;
    }

    tr {
      td {
        cursor: pointer;
        color: #26f;
        text-align: center;
        user-select: none;

        &:hover {
          opacity: 0.7;
        }
      }
    }
  }
</style>