Blame view

src/views/generator/appForm/Form.vue 6.92 KB
4424f41c   monkeyhouyi   网信执法、清单管理静态页面
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
  <template>
    <el-dialog :visible.sync="visible" fullscreen lock-scroll class="NCC-full-dialog"
      :show-close="false" :modal="false" append-to-body>
      <div class="NCC-full-dialog-header">
        <div class="header-title">
          <img src="@/assets/images/ncc.png" class="header-logo" />
          <p class="header-txt"> · 代码生成</p>
        </div>
        <el-steps :active="activeStep" finish-status="success" simple
          :class="'steps steps'+(maxStep+1)" v-if="!loading">
          <el-step title="基础设置" @click.native="stepChick(0)" />
          <el-step title="表单设计" @click.native="stepChick(1)" />
          <el-step title="列表设计" @click.native="stepChick(2)" v-if="maxStep>=2" />
          <el-step title="流程设计" @click.native="stepChick(3)" v-if="maxStep>=3" />
        </el-steps>
        <div class="options">
          <el-button @click="prve" :disabled="activeStep<=0">{{$t('common.prev')}}</el-button>
          <el-button @click="next" :disabled="activeStep>=maxStep || loading">{{$t('common.next')}}
          </el-button>
          <el-button type="primary" @click="dataFormSubmit()" :disabled="activeStep!=maxStep"
            :loading="btnLoading">{{$t('common.confirmButton')}}</el-button>
          <el-button @click="closeDialog()">{{$t('common.cancelButton')}}</el-button>
        </div>
      </div>
      <div class="main" v-loading="loading">
        <el-row type="flex" justify="center" align="middle" v-if="!activeStep" class="basic-box">
          <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="10" class="basicForm">
            <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="80px"
              @submit.native.prevent label-position="right">
              <el-form-item label="模板名称" prop="fullName">
                <el-input v-model="dataForm.fullName" placeholder="模板名称" maxlength="100">
                </el-input>
              </el-form-item>
              <el-form-item label="模板编码" prop="enCode">
                <el-input v-model="dataForm.enCode" placeholder="模板编码" maxlength="50">
                </el-input>
              </el-form-item>
              <el-form-item label="模板分类" prop="category">
                <el-select v-model="dataForm.category" placeholder="选择分类">
                  <el-option :key="item.id" :label="item.fullName" :value="item.id"
                    v-for="item in categoryList" />
                </el-select>
              </el-form-item>
              <el-form-item label="模板说明" prop="description">
                <el-input v-model="dataForm.description" placeholder="模板说明" type="textarea"
                  :rows="3" />
              </el-form-item>
              <el-form-item label="数据连接">
                <el-select v-model="dataForm.dbLinkId" placeholder="请选择数据库" @change="onDbChange"
                  clearable>
                  <el-option-group v-for="group in dbOptions" :key="group.fullName"
                    :label="group.fullName">
                    <el-option v-for="item in group.children" :key="item.id" :label="item.fullName"
                      :value="item.id" />
                  </el-option-group>
                </el-select>
              </el-form-item>
              <el-table :data="tables" class="NCC-common-table"
                empty-text="点击“新增”可选择 1 条(单表)或 2 条以上(多表)">
                <el-table-column type="index" label="序号" width="50" align="center" />
                <el-table-column prop="typeId" label="类别" width="65">
                  <template slot-scope="scope">
                    <el-tag v-if="scope.row.typeId=='1'">主表</el-tag>
                    <el-tag type="warning" v-else @click="changeTable(scope.row)"
                      style="cursor:pointer" title="点击设置成主表">子表</el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="tableName" label="说明" />
                <el-table-column prop="table" label="表名" />
                <el-table-column prop="tableField" label="外键字段">
                  <template slot-scope="scope" v-if="scope.row.typeId !=='1'">
                    <el-select v-model="scope.row.tableField" placeholder="请选择">
                      <el-option v-for="item in scope.row.fields" :key="item.field"
                        :label="item.field" :value="item.field">
                      </el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <!-- <el-table-column prop="relationTable" label="关联主表" /> -->
                <el-table-column prop="relationField" label="关联主键">
                  <template slot-scope="scope" v-if="scope.row.typeId !=='1'">
                    <el-select v-model="scope.row.relationField" placeholder="请选择">
                      <el-option v-for="item in mainTableFields" :key="item.field" :label="item.field"
                        :value="item.field">
                      </el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column label="操作" fixed="right" width="50">
                  <template slot-scope="scope">
                    <el-button size="mini" type="text" class="NCC-table-delBtn"
                      @click="delItem(scope.row,scope.$index)">删除
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
              <div class="table-actions" @click="openTableBox">
                <el-button type="text" icon="el-icon-plus">新增一行</el-button>
              </div>
            </el-form>
          </el-col>
        </el-row>
        <template v-if="activeStep==1">
          <Generator ref="generator" :conf="formData" :modelType="dataForm.type" />
        </template>
        <template v-if="activeStep==2">
          <columnDesign ref="columnDesign" :conf="columnData" />
        </template>
        <template v-if="activeStep==3">
          <Process ref="process" :conf="flowTemplateJson" :flowType="1" />
        </template>
      </div>
      <TableForm :visible.sync="formVisible" ref="tableForm" @closeForm="colseForm"
        :dbLinkId="dataForm.dbLinkId" />
    </el-dialog>
  </template>
  
  <script>
  import Generator from '@/components/Generator/index/HomeApp'
  import ColumnDesign from '@/components/ColumnDesign/indexApp'
  import Process from "@/components/Process"
  import TableForm from '../TableForm'
  import mixin from '@/mixins/generator/form'
  export default {
    mixins: [mixin],
    components: { Generator, ColumnDesign, Process, TableForm },
    data() {
      return {
        dataRule: {
          fullName: [
            { required: true, message: '模板名称不能为空', trigger: 'blur' },
          ],
          enCode: [
            { required: true, message: '模板编码不能为空', trigger: 'blur' },
            { validator: this.formValidate('enCode'), trigger: 'blur' },
          ],
          category: [
            { required: true, message: '模板分类不能为空', trigger: 'change' },
          ]
        }
      }
    }
  }
  </script>