settle_down_web/src/views/system/generate.vue

<template>
  <div>
    <el-form ref="form" v-loading="loading" style="width: 100%;padding: 5px">
      <el-row class="handle-box" style="margin-bottom: 10px">
        <el-col :span="24">
          <span class="card_title">基本信息</span>
          <el-card shadow="always" style="padding: 15px 5px 5px 15px">
            <el-row>
              <el-col :span="3" class="col-txt"><span>生成的文件名</span></el-col>
              <el-col :span="8" class="col-input">
                <el-form-item>
                  <el-input v-model="fileName" />
                </el-form-item>
              </el-col>
              <el-col :span="4" class="col-txt"><span>控制器名称</span></el-col>
              <el-col :span="8" class="col-input">
                <el-form-item>
                  <el-input v-model="controller" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="3" class="col-txt"><span>文件夹地址</span></el-col>
              <el-col :span="20" class="col-input">
                <el-form-item>
                  <el-input v-model="filePath" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
      <el-row class="handle-box" style="margin-bottom: 10px">
        <el-col :span="24">
          <span class="card_title">字段信息</span>
          <el-card shadow="always" style="padding: 15px 5px 5px 15px">
            <el-row>
              <el-col :span="24">
                <el-table
                  :data="FieldData"
                  header-row-class-name="g_table_header"
                  height="300"
                  row-class-name="g_table_row"
                  stripe
                >
                  <el-table-column type="index" width="40" />
                  <el-table-column align="center" header-align="center" label="字段">
                    <template scope="scope">
                      <el-input v-model="scope.row.key" class="f-small" size="small" />
                    </template>
                  </el-table-column>
                  <el-table-column align="center" header-align="center" label="字段显示名">
                    <template scope="scope">
                      <el-input v-model="scope.row.value" class="f-small" size="small" />
                    </template>
                  </el-table-column>
                  <el-table-column align="center" header-align="center" label="导出宽度">
                    <template scope="scope">
                      <el-input v-model="scope.row.opWidth" class="f-small" size="small" />
                    </template>
                  </el-table-column>
                  <el-table-column align="center" header-align="center" label="是否字典项">
                    <template scope="scope">
                      <el-checkbox v-model="scope.row.isDict" @change="checkSearchField(scope.row.id)" />
                    </template>
                  </el-table-column>
                  <el-table-column align="center" header-align="center" label="字典KEY">
                    <template scope="scope">
                      <el-input v-model="scope.row.dictKey" class="f-small" size="small" />
                    </template>
                  </el-table-column>
                  <el-table-column align="center" header-align="center" label="是否搜索">
                    <template scope="scope">
                      <el-checkbox v-model="scope.row.isSearch" @change="checkSearchField(scope.row.id)" />
                    </template>
                  </el-table-column>
                  <el-table-column align="center" header-align="center" label="类型">
                    <template scope="scope">
                      <el-input v-model="scope.row.type" class="f-small" size="small" />
                    </template>
                  </el-table-column>
                  <el-table-column align="right" width="120">
                    <template slot="header">
                      <el-button
                        size="mini"
                        type="primary"
                        @click="keepAddLine()"
                      >添加</el-button>
                    </template>
                    <template scope="scope">
                      <el-button
                        size="mini"
                        type="danger"
                        @click="deleteLine(scope.$index, FieldData) "
                      >删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
    </el-form>
    <el-row class="handle-box" style="margin-bottom: 10px">
      <el-col :span="24">
        <span class="card_title">生成历史</span>
        <el-card shadow="always" style="padding: 15px 5px 5px 15px">
          <el-row>
            <el-col :span="24">
              <el-table
                :data="HisData"
                header-row-class-name="g_table_header"
                height="300"
                row-class-name="g_table_row"
                stripe
              >
                <el-table-column type="index" width="40" />
                <el-table-column align="center" header-align="center" label="id" prop="id" />
                <el-table-column align="center" header-align="center" label="fileName" prop="fileName" />
                <el-table-column align="center" header-align="center" label="创建时间" prop="createdAt" />
                <el-table-column align="right" width="80">
                  <template scope="scope">
                    <el-button
                      size="mini"
                      type="primary"
                      @click="fill(scope.row)"
                    >回填</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>

    <div slot="footer" style="float: right">
      <el-button @click="">重 置</el-button>
      <el-button type="primary" @click="confirmSubmit()">生成代码</el-button>
    </div>
  </div>
</template>

<script>
export default {
    name: 'GenerateCode',
    data() {
        return {
            loading: false,
            fileName: '',
            filePath: '',
            controller: '',
            FieldData: [],
            HisData: []
        }
    },
    mounted() {
        this.initHis()
    },
    methods: {
        initHis: function() {
            const genHis = this.$common.castEval(localStorage.getItem('genHis'))
            if (genHis && this.$common.isArrayFn(genHis)) {
                this.HisData = genHis
                //console.log('his', this.HisData)
            }
        },
        fill: function(val) {
            //console.log(val)
            const his = this.$common.castEval(val.his)
            if (his) {
                //console.log('fill select s', his)
                this.fileName = his.fileName
                this.filePath = his.filePath
                this.controller = his.controller
                this.FieldData = this.$common.castEval(his.fieldData)
            }
        },
        keepAddLine: function() {
            const newcont = {
                id: new Date().getTime(),
                key: '',
                value: '',
                opWidth: '', // 导出宽度
                isDict: false,
                dictKey: '', // 字典key
                isSearch: false,
                type: 'input'
            }
            this.FieldData.push(newcont)
        },
        checkSearchField: function(val) {
            //console.log(this.FieldData)
        },
        deleteLine: function(index, rows) {
            rows.splice(index, 1)
        },
        reset: function() {
            this.fileName = ''
            this.controller = ''
            this.filePath = ''
            this.HisData = []
        },
        confirmSubmit: function() {
            const _this = this
            const fields = {}
            const searchs = {}
            this.FieldData.forEach(function(item) {
                fields[item.key] = item.value
                if (item.isSearch) {
                    searchs[item.key] = item.value
                }
            })

            const postData = {
                fileName: this.fileName,
                controller: this.controller,
                filePath: this.filePath,
                fieldData: JSON.stringify(this.FieldData),
                createdAt: this.$common.transServDate(new Date())
                // fields: JSON.stringify(fields),
                // seachFields: JSON.stringify(searchs),
            }

            this.loading = true
            // //console.log(postData)
            this.$axios({
                headers: {
                    'MVVM-Key': String(new Date().getTime()),
                    'xx': 'anything'
                },
                method: 'post',
                url: this.$constant.BASE_URI + '/VueGenController/code',
                data: this.$qs.stringify(postData)
            }).then((res) => {
                //console.log('Gen ', res)
                const his = {
                    id: String(new Date().getTime()),
                    fileName: postData.fileName,
                    createdAt: postData.createdAt,
                    his: _this.$common.castString(postData)
                }
                let genHis = _this.$common.castEval(localStorage.getItem('genHis'))
                if (!genHis || !_this.$common.isArrayFn(genHis)) {
                    genHis = []
                }
                // genHis.push(his)
                genHis.unshift(his)
                localStorage.setItem('genHis', _this.$common.castString(genHis))
                _this.initHis()
                _this.$common.checkLoginStatus(res.data.statusCode)
                _this.loading = false
                _this.$notify({
                    title: '生成完成',
                    type: 'info'
                })
            }).catch((err, x) => {
                //console.log('biz user list error', err, x)
            })
        }
    }
}
</script>

<style scoped>
    .ch-input .el-input__inner {
        border-radius: 0px;
        border-color: #32323A;
    }

    .ch-input-size {
        width: 200px;
        /*margin-right: 10px;*/
    }

    .ch-button {
        border-radius: 0px;
        border-color: #32323A;
        background-color: #32323A;
        color: #fff;
    }
</style>