huikaifa/src/views/Page/Edit/ListConfig.vue

<!--
 * @Author: WangJiaCheng
 * @Date: 2021-05-12 15:36:33
 * @LastEditors: WangJiaCheng
 * @LastEditTime: 2021-07-27 10:17:04
 * @Description:
-->
<template>
  <div class="form-config">
    <el-form
      ref="listForm"
      :rules="rules"
      :model="formData"
      label-width="100px"
    >
      <el-form-item label="列表模型" prop="listModel">
        <el-select v-model="formData.listModel" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <!-- TODO: 是否可以打通yapi接口，提供接口选择 -->
      <el-form-item label="列表接口">
        <el-input
          v-model="formData.listApi"
        />
      </el-form-item>
      <el-form-item label="请求方式">
        <el-input
          v-model="formData.apiMethod"
        />
      </el-form-item>
      <el-form-item label="表格列配置">
        <el-table
          border
          :data="tableData"
          style="width: 100%"
        >
          <el-table-column
            prop="type"
            label="类型"
            width="180"
          >
            <template slot-scope="{row}">
              <el-select v-model="row.type" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column
            prop="field"
            label="列字段"
            width="180"
          >
            <template slot-scope="{row}">
              <el-input
                v-model="row.field"
              />
            </template>
          </el-table-column>
          <el-table-column
            prop="name"
            label="列名称"
            width="180"
          >
            <template slot-scope="{row}">
              <el-input
                v-model="row.name"
              />
            </template>
          </el-table-column>
          <el-table-column
            prop="minWidth"
            label="最小宽度"
            width="180"
          >
            <template slot-scope="{row}">
              <el-input
                v-model="row.minWidth"
              />
            </template>
          </el-table-column>
          <el-table-column
            prop="width"
            label="宽度"
            width="180"
          >
            <template slot-scope="{row}">
              <el-input
                v-model="row.width"
              />
            </template>
          </el-table-column>
          <el-table-column
            prop="fixed"
            label="固定"
            width="80"
          >
            <template slot-scope="{row}">
              <el-switch
                v-model="row.fixed"
              />
            </template>
          </el-table-column>
          <el-table-column
            prop="filter"
            label="表头过滤"
            width="180"
          />
          <el-table-column
            prop="edit"
            label="操作"
            width="180"
          />
        </el-table>
        <el-button
          style="margin-top: 8px"
          @click="addCol"
        >
          新增列
        </el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="next">下一步</el-button>
        <el-button type="primary" @click="previewCode">预览代码</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'

export default {
  name: 'ListConfig',
  components: {
  },
  data() {
    return {
      formData: {},
      rules: {},
      options: [
        {
          value: '1',
          label: '列表1'
        },
        {
          value: '2',
          label: '列表2'
        }
      ],
      tableData: [
        {
          type: '',
          name: '',
          field: '',
          minWidth: '',
          width: '',
          fixed: false,
          filter: ''
        }
      ]
    }
  },
  methods: {
    ...mapMutations('page', ['setListConfig', 'setActiveTab']),
    next() {
      this.setListConfig({ ...this.formData, list: this.tableData })
      this.setActiveTab('detail')
    },
    previewCode() {
      this.$emit('preview', { ...this.formData, list: this.tableData }, 'list')
    },
    addCol() {
      this.tableData.push({
        type: '',
        name: '',
        field: '',
        minWidth: '',
        width: '',
        fixed: false,
        filter: ''
      })
    }
  }
}
</script>

<style lang="less">

</style>