editTable.vue 40 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018
  1. <template>
  2. <el-card>
  3. <el-row type="flex" justify="space-between">
  4. <el-col :span="1.5" style="display: flex; align-items: center;">
  5. <el-form label-width="100px" style="display: flex; align-items: center;">
  6. <el-form-item style="text-align: center;margin: 0 0 0 -100px;">
  7. <el-button size="mini" type="primary" v-if="activeName=='basic' || activeName=='cloum'" @click="submitForm()">保存</el-button>
  8. <el-button size="mini" @click="close()">返回</el-button>
  9. </el-form-item>
  10. </el-form>
  11. </el-col>
  12. </el-row>
  13. <el-tabs v-model="activeName">
  14. <el-tab-pane label="基本信息" name="basic">
  15. <basic-info-form ref="basicInfo" :info="info" />
  16. </el-tab-pane>
  17. <el-tab-pane label="字段信息" name="cloum">
  18. <el-row type="flex" style="margin-bottom: 20px;" v-if="activeName=='cloum'" :gutter="10" justify="end">
  19. <el-col :span="1.5" style="display: flex; align-items: center;">
  20. <el-button style="background-color: #FFE9ED;color: #E58481;border: 1px solid #E58481;" type="warning" plain
  21. icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['system:post:add']">新增</el-button>
  22. </el-col>
  23. <el-col :span="1.5" style="display: flex; align-items: center;">
  24. <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
  25. v-hasPermi="['system:post:remove']" style="background-color: #FFD6B0;color: #EA551A;border: 1px solid #F4AD6B;">删除</el-button>
  26. </el-col>
  27. <!-- <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> -->
  28. </el-row>
  29. <el-table ref="dragTable" @row-dblclick="dbSelectedZd" align="center" :data="cloumns" row-key="columnId"
  30. :max-height="tableHeight" @selection-change="handleSelectionChange">
  31. <el-table-column type="selection" width="55" align="center" />
  32. <el-table-column label="序号" type="index" min-width="5%" class-name="allowDrag" align="center" />
  33. <el-table-column label="字段列名" prop="columnName" min-width="10%" :show-overflow-tooltip="true" align="center" />
  34. <el-table-column label="字段描述" min-width="10%" align="center">
  35. <template slot-scope="scope">
  36. <el-input v-model="scope.row.columnComment"></el-input>
  37. </template>
  38. </el-table-column>
  39. <el-table-column label="物理类型" prop="columnType" align="center" min-width="10%" :show-overflow-tooltip="true" />
  40. <el-table-column label="字段显示规则" align="center" prop="mask" min-width="13%" />
  41. <el-table-column label="排序" min-width="8%" align="center" prop="sort" />
  42. <el-table-column label="输入字段" min-width="10%" align="center">
  43. <template slot-scope="scope">
  44. <el-checkbox true-label="Y" false-label="N" v-model="scope.row.isIn"></el-checkbox>
  45. </template>
  46. </el-table-column>
  47. <el-table-column label="显示字段" min-width="10%" align="center">
  48. <template slot-scope="scope">
  49. <el-checkbox true-label="Y" false-label="N" v-model="scope.row.isOut"></el-checkbox>
  50. </template>
  51. </el-table-column>
  52. <el-table-column label="查询" min-width="8%" align="center">
  53. <template slot-scope="scope">
  54. <el-checkbox true-label="1" false-label="0" v-model="scope.row.isQuery"></el-checkbox>
  55. </template>
  56. </el-table-column>
  57. <el-table-column label="关联HR字段" min-width="13%" align="center" prop="hrParentId">
  58. <template slot-scope="scope">
  59. <div>
  60. {{scope.row.hrParentName}}
  61. </div>
  62. </template>
  63. </el-table-column>
  64. <el-table-column label="缺省值" min-width="10%" align="center" prop="defaultValue" />
  65. <el-table-column label="外键" min-width="10%" align="center" prop="foreignKey">
  66. <template slot-scope="scope">
  67. <div>
  68. {{scope.row.foreignKeyName}}
  69. </div>
  70. </template>
  71. </el-table-column>
  72. <el-table-column label="必填" min-width="8%" align="center">
  73. <template slot-scope="scope">
  74. <el-checkbox true-label="1" false-label="0" v-model="scope.row.isRequired"></el-checkbox>
  75. </template>
  76. </el-table-column>
  77. <el-table-column label="显示类型" min-width="12%" align="center">
  78. <template slot-scope="scope">
  79. <el-select v-model="scope.row.htmlType">
  80. <el-option label="文本框" value="input" />
  81. <el-option label="文本域" value="textarea" />
  82. <el-option label="下拉框" value="select" />
  83. <el-option label="单选框" value="radio" />
  84. <el-option label="复选框" value="checkbox" />
  85. <el-option label="日期控件" value="datetime" />
  86. <el-option label="图片上传" value="imageUpload" />
  87. <el-option label="文件上传" value="fileUpload" />
  88. <el-option label="富文本控件" value="editor" />
  89. <el-option label="hr" value="hr" />
  90. </el-select>
  91. </template>
  92. </el-table-column>
  93. <el-table-column label="字典类型" min-width="12%" align="center">
  94. <template slot-scope="scope">
  95. <el-select v-model="scope.row.dictType" clearable filterable placeholder="请选择">
  96. <el-option v-for="dict in dictOptions" :key="dict.dictType" :label="dict.dictName" :value="dict.dictType">
  97. <span style="float: left">{{ dict.dictName }}</span>
  98. <span style="float: right; color: #8492a6; font-size: 13px">{{ dict.dictType }}</span>
  99. </el-option>
  100. </el-select>
  101. </template>
  102. </el-table-column>
  103. </el-table>
  104. <!-- 添加或修改岗位对话框 -->
  105. <el-dialog :close-on-click-modal="false" :title="title" :visible.sync="openZd" width="70vw" append-to-body>
  106. <el-form ref="formZd" :model="formZd" :rules="rulesZd" label-width="120px">
  107. <el-row>
  108. <el-col :span="8">
  109. <el-form-item label="字段名:" prop="columnName">
  110. <el-input :disabled="this.formZd.id" v-model="formZd.columnName" placeholder="请输入字段名" />
  111. </el-form-item>
  112. </el-col>
  113. <el-col :span="8">
  114. <el-form-item label="字段描述:" prop="columnComment">
  115. <el-input v-model="formZd.columnComment" placeholder="请输入字段描述" />
  116. </el-form-item>
  117. </el-col>
  118. <el-col :span="8">
  119. <el-form-item label="物理类型:" prop="columnType">
  120. <el-input v-model="formZd.columnType" placeholder="请输入物理类型" />
  121. </el-form-item>
  122. </el-col>
  123. </el-row>
  124. <el-row>
  125. <el-col :span="8">
  126. <el-form-item label="字段显示规则:" prop="mask">
  127. <el-input v-model="formZd.mask" placeholder="请输入字段显示规则" />
  128. </el-form-item>
  129. </el-col>
  130. <el-col :span="8">
  131. <el-form-item label="排序:" prop="sort">
  132. <el-input-number style="width: 100%;" v-model="formZd.sort" placeholder="请输入排序" />
  133. </el-form-item>
  134. </el-col>
  135. <el-col :span="8">
  136. <el-form-item label="正则表达式:" prop="regular">
  137. <el-input v-model="formZd.regular" placeholder="请输入正则表达式" />
  138. </el-form-item>
  139. </el-col>
  140. </el-row>
  141. <el-row>
  142. <el-col :span="8">
  143. <el-form-item label="外键(FK):" prop="foreignKey">
  144. <!-- <el-select style="width: 100%;" filterable v-model="formZd.foreignKey" placeholder="请选择外键(FK)" clearable size="small">
  145. <el-option v-for="dict in columList" :key="dict.columnId" :label="dict.columnName" :value="dict.columnId" />
  146. </el-select> -->
  147. <div style="cursor: pointer;" @click="fkzdFn">
  148. <el-input readonly style="width: 100%;" clearable v-model="ForeName" placeholder="请选择外键(FK)" />
  149. </div>
  150. </el-form-item>
  151. </el-col>
  152. <el-col :span="8">
  153. <el-form-item label="关联HR字段:" prop="hrParentId">
  154. <el-select style="width: 100%;" v-model="formZd.hrParentId" placeholder="请选择关联HR字段" clearable>
  155. <el-option v-for="dict in columHRList" :key="dict.id" :label="dict.columnName" :value="dict.id" />
  156. </el-select>
  157. </el-form-item>
  158. </el-col>
  159. <el-col :span="8">
  160. <el-form-item label="缺省值:" prop="defaultValue">
  161. <el-input v-model="formZd.defaultValue" placeholder="请输入缺省值" />
  162. </el-form-item>
  163. </el-col>
  164. </el-row>
  165. <el-row>
  166. <el-col :span="8">
  167. <el-form-item label="行数:" prop="numRows">
  168. <el-input-number style="width: 100%;" v-model="formZd.numRows" placeholder="请输入行数" />
  169. </el-form-item>
  170. </el-col>
  171. <el-col :span="8">
  172. <el-form-item label="列数:" prop="numColumns">
  173. <el-input-number style="width: 100%;" v-model="formZd.numColumns" placeholder="请输入列数" />
  174. </el-form-item>
  175. </el-col>
  176. <el-col :span="8">
  177. <el-form-item label="字段翻译器:" prop="fieldTranslator">
  178. <el-input v-model="formZd.fieldTranslator" placeholder="请输入字段翻译器" />
  179. </el-form-item>
  180. </el-col>
  181. </el-row>
  182. <el-row>
  183. <el-col :span="8">
  184. <el-form-item label="扩展属性:" prop="extendedAttributes">
  185. <el-input v-model="formZd.extendedAttributes" placeholder="请输入扩展属性" />
  186. </el-form-item>
  187. </el-col>
  188. <el-col :span="8">
  189. <el-form-item label="查询方式:" prop="queryType">
  190. <el-select style="width: 100%;" v-model="formZd.queryType">
  191. <el-option label="=" value="EQ" />
  192. <el-option label="!=" value="NE" />
  193. <el-option label=">" value="GT" />
  194. <el-option label=">=" value="GTE" />
  195. <el-option label="<" value="LT" />
  196. <el-option label="<=" value="LTE" />
  197. <el-option label="LIKE" value="LIKE" />
  198. <el-option label="BETWEEN" value="BETWEEN" />
  199. </el-select>
  200. </el-form-item>
  201. </el-col>
  202. <el-col :span="8">
  203. <el-form-item label="显示类型:" prop="htmlType">
  204. <el-select style="width: 100%;" v-model="formZd.htmlType">
  205. <el-option label="文本框" value="input" />
  206. <el-option label="文本域" value="textarea" />
  207. <el-option label="下拉框" value="select" />
  208. <el-option label="单选框" value="radio" />
  209. <el-option label="复选框" value="checkbox" />
  210. <el-option label="日期控件" value="datetime" />
  211. <el-option label="图片上传" value="imageUpload" />
  212. <el-option label="文件上传" value="fileUpload" />
  213. <el-option label="富文本控件" value="editor" />
  214. <el-option label="hr" value="hr" />
  215. </el-select>
  216. </el-form-item>
  217. </el-col>
  218. </el-row>
  219. <el-row>
  220. <el-col :span="8">
  221. <el-form-item label="字典类型:" prop="dictType">
  222. <template slot-scope="scope">
  223. <el-select style="width: 100%;" v-model="formZd.dictType" clearable filterable placeholder="请选择">
  224. <el-option v-for="dict in dictOptions" :key="dict.dictType" :label="dict.dictName" :value="dict.dictType">
  225. <span style="float: left">{{ dict.dictName }}</span>
  226. <span style="float: right; color: #8492a6; font-size: 13px">{{ dict.dictType }}</span>
  227. </el-option>
  228. </el-select>
  229. </template>
  230. </el-form-item>
  231. </el-col>
  232. <el-col :span="8">
  233. <el-form-item label="显示字段" prop="isOut">
  234. <el-checkbox true-label="Y" false-label="N" v-model="formZd.isOut"></el-checkbox>
  235. </el-form-item>
  236. </el-col>
  237. <el-col :span="8">
  238. <el-form-item label="输入字段" prop="isIn">
  239. <el-checkbox true-label="Y" false-label="N" v-model="formZd.isIn"></el-checkbox>
  240. </el-form-item>
  241. </el-col>
  242. </el-row>
  243. <el-row>
  244. <el-col :span="8">
  245. <el-form-item label="查询条件" prop="isQuery">
  246. <el-checkbox true-label="1" false-label="0" v-model="formZd.isQuery"></el-checkbox>
  247. </el-form-item>
  248. </el-col>
  249. <el-col :span="8">
  250. <el-form-item label="必填" prop="isRequired">
  251. <el-checkbox true-label="1" false-label="0" v-model="formZd.isRequired"></el-checkbox>
  252. </el-form-item>
  253. </el-col>
  254. </el-row>
  255. </el-form>
  256. <div slot="footer" class="dialog-footer">
  257. <el-button type="primary" @click="submitFormZd">确 定</el-button>
  258. <el-button @click="cancel">取 消</el-button>
  259. </div>
  260. </el-dialog>
  261. </el-tab-pane>
  262. <!-- <el-tab-pane label="生成信息" name="genInfo">
  263. <gen-info-form ref="genInfo" :info="info" :tables="tables" :menus="menus"/>
  264. </el-tab-pane> -->
  265. <el-tab-pane label="关联表" name="genInfo">
  266. <el-row style="margin-bottom: 20px;" type="flex" :gutter="10" justify="end">
  267. <el-col :span="1.5">
  268. <el-button @click="handleAdd_gl" icon="el-icon-plus" size="mini" style="background-color: #FFE9ED;color: #E58481;border: 1px solid #E58481;">新增</el-button>
  269. </el-col>
  270. <el-col :span="1.5">
  271. <el-button icon="el-icon-delete" @click="handleDel_gl" size="mini" style="background-color: #FFD6B0;color: #EA551A;border: 1px solid #F4AD6B;"
  272. :disabled="multiple1">删除</el-button>
  273. </el-col>
  274. </el-row>
  275. <el-table ref="dragTable" @row-dblclick="dbSelected" v-loading="loading" :data="postList" row-key="columnId"
  276. align="center" :max-height="tableHeight" @selection-change="handleSelectionChange1">
  277. <el-table-column type="selection" width="55" align="center" />
  278. <el-table-column label="id" width="60" align="center" prop="id" />
  279. <el-table-column label="可用" align="center" prop="isDel">
  280. <template slot-scope="scope">
  281. <el-checkbox true-label="Y" disabled false-label="N" v-model="scope.row.isDel"></el-checkbox>
  282. </template>
  283. </el-table-column>
  284. <el-table-column label="序号" align="center" prop="sort" />
  285. <el-table-column label="描述" align="center" prop="description" />
  286. <el-table-column label="关联表" align="center" prop="tableName" />
  287. <el-table-column label="字段(关联到主表PK)" width="160px" align="center" prop="columnName" />
  288. <el-table-column label="显示条件" align="center" prop="displayConditions" />
  289. <el-table-column label="关联方式" align="center" prop="relationType">
  290. <template slot-scope="scope">
  291. {{scope.row.relationType | relationTypeFn}}
  292. </template>
  293. </el-table-column>
  294. <el-table-column label="内嵌编辑" align="center" prop="embedEdit">
  295. <template slot-scope="scope">
  296. {{scope.row.embedEdit | embedEditFn}}
  297. </template>
  298. </el-table-column>
  299. <el-table-column label="修改人" align="center" prop="updateBy" />
  300. <el-table-column label="修改时间" align="center" prop="updateTime" />
  301. </el-table>
  302. <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
  303. @pagination="tabList" />
  304. </el-tab-pane>
  305. <el-tab-pane label="数据库SQL" name="genSql">
  306. <el-row type="flex" justify="end">
  307. <el-button @click="zxCreaBtn" size="mini" style="background-color: #FFE9ED;color: #E58481;border: 1px solid #E58481;">执行创建语句</el-button>
  308. <el-button @click="sxCreaBtn" size="mini" style="background-color: #FFD6B0;color: #EA551A;border: 1px solid #F4AD6B;">刷新创建语句</el-button>
  309. </el-row>
  310. <el-form>
  311. <el-form-item label="创建语句:" style="margin-top: 20px;">
  312. <el-input class="resizeNone" v-model="tableSqlData.createSql" type="textarea" />
  313. </el-form-item>
  314. <el-form-item label="修改日志:">
  315. <el-input class="resizeNone" v-model="tableSqlData.createLog" type="textarea" />
  316. </el-form-item>
  317. </el-form>
  318. </el-tab-pane>
  319. </el-tabs>
  320. <!-- 添加或修改岗位对话框 -->
  321. <el-dialog :close-on-click-modal="false" :title="title" :visible.sync="open" width="500px" append-to-body>
  322. <el-form ref="form" :model="form" :rules="rules" label-width="100px">
  323. <el-form-item label="描述:" prop="postName">
  324. <el-input v-model="form.description" placeholder="请输入描述" />
  325. </el-form-item>
  326. <el-form-item label="关联表:" prop="relationParentId">
  327. <el-select style="width: 100%;" v-model="form.relationParentId" placeholder="请选择关联表" @change="relationFn"
  328. v-loadmore="loadMore">
  329. <el-option v-for="item in tableList.rows" :key="item.tableId" :label="item.tableComment" :value="item.tableId">
  330. </el-option>
  331. </el-select>
  332. </el-form-item>
  333. <el-form-item label="字段:" prop="relationChildId">
  334. <el-select style="width: 100%;" v-model="form.relationChildId" placeholder="请选择字段" v-loadmore="loadMore">
  335. <el-option v-for="item in genList" v-if="item.foreignKey" :key="item.columnId" :label="item.columnName" :value="item.columnId">
  336. </el-option>
  337. </el-select>
  338. </el-form-item>
  339. <el-form-item label="显示条件:" prop="displayConditions">
  340. <el-input v-model="form.displayConditions" controls-position="right" placeholder="请输入显示条件" />
  341. </el-form-item>
  342. <el-form-item label="关联方式:" prop="relationType">
  343. <el-select style="width: 100%;" v-model="form.relationType" placeholder="请选择关联方式" clearable size="small">
  344. <el-option v-for="dict in relationType" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
  345. </el-select>
  346. </el-form-item>
  347. <el-form-item label="内嵌编辑:" prop="embedEdit">
  348. <el-select style="width: 100%;" v-model="form.embedEdit" placeholder="岗位状态" clearable size="small">
  349. <el-option v-for="dict in embedEdit" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
  350. </el-select>
  351. </el-form-item>
  352. <el-form-item label="序号:" prop="sort">
  353. <el-input-number style="width: 100%;" v-model="form.sort" controls-position="right" :min="0" />
  354. </el-form-item>
  355. <el-form-item label="是否可用:" prop="isDel">
  356. <el-checkbox true-label="Y" false-label="N" v-model="form.isDel"></el-checkbox>
  357. </el-form-item>
  358. </el-form>
  359. <div slot="footer" class="dialog-footer">
  360. <el-button type="primary" @click="addGlfn">确 定</el-button>
  361. <el-button @click="cancel">取 消</el-button>
  362. </div>
  363. </el-dialog>
  364. <!-- 快速搜索对话框 -->
  365. <el-dialog :close-on-click-modal="false" :title="titleopenquery" :visible.sync="openquery" width="1200px" append-to-body>
  366. <el-form ref="formquery" @row-dblclick="dbSelectedZd" :model="formquery" :rules="rules" label-width="100px">
  367. <dynamic-forms :ref="item.columnName" :config="formquery.fixedData" @inputs = "changeFn" :formConfig="item" v-for="(item,index) in queryData.queryList" :key='index' />
  368. <el-form-item style="display: inline-block;">
  369. <el-button type="primary" @click="handleQuery">搜索</el-button>
  370. <el-button @click="openquery = false">取消</el-button>
  371. </el-form-item>
  372. </el-form>
  373. <el-table stripe @row-dblclick="tableBtn" :data="postListquery.rows" @selection-change="handleSelectionChange">
  374. <el-table-column :label="item.columnComment" align="center" :prop="item.columnName" v-for="(item,index) in postListquery.tableHeadList" :key="index" />
  375. </el-table>
  376. <pagination
  377. v-show="totalquery>0"
  378. :total="totalquery"
  379. :page.sync="aliemg.pageNo"
  380. :limit.sync="aliemg.pageSize"
  381. @pagination="getLisail"
  382. />
  383. </el-dialog>
  384. </el-card>
  385. </template>
  386. <script>
  387. import {
  388. getGenTable,
  389. updateGenTable,
  390. delPost,
  391. tabList,
  392. listTable,
  393. addGenTable,
  394. setGenTable,
  395. delGenTable,
  396. listAllColumnsByTableId,
  397. genTableColumnList,
  398. tableSql,
  399. zxImplement,
  400. getReload,
  401. addGenTableColumn,
  402. delGenTableColumn,
  403. setGenTableColumn,
  404. getGenTableColumn,
  405. getByIdWithForeignKey,
  406. listIndexfou,
  407. tableQuery,
  408. qurGenTable
  409. } from "@/api/tool/gen";
  410. import {
  411. optionselect as getDictOptionselect
  412. } from "@/api/system/dict/type";
  413. import {
  414. listMenu as getMenuTreeselect
  415. } from "@/api/system/menu";
  416. import basicInfoForm from "./basicInfoForm";
  417. import genInfoForm from "./genInfoForm";
  418. import Sortable from 'sortablejs'
  419. let _this = ''
  420. export default {
  421. name: "GenEdit",
  422. components: {
  423. basicInfoForm,
  424. genInfoForm
  425. },
  426. data() {
  427. _this = this
  428. return {
  429. ForeName: '',
  430. totalquery:0,
  431. // 多行查询
  432. titleopenquery:'快速查询',
  433. // 获取输入框的参数
  434. queryLisr:{
  435. table:'gen_table_column'
  436. },
  437. aliemg:{
  438. table:'gen_table_column',
  439. orderBy:'create_time desc',
  440. pageNo:1,
  441. pageSize:10,
  442. fixedData:{
  443. condition:''
  444. }
  445. },
  446. postListquery:{},
  447. queryData: {},
  448. openquery:false,
  449. formquery:{},
  450. // 字段信息
  451. tableSqlData: [],
  452. columList: [],
  453. columHRList: [],
  454. foreignKey: [],
  455. openZd: false,
  456. formZd: {
  457. },
  458. rulesZd: {
  459. columnName: [{
  460. required: true,
  461. message: "请输入字段名",
  462. trigger: "blur"
  463. }],
  464. columnComment: [{
  465. required: true,
  466. message: "请输入字段描述",
  467. trigger: "blur"
  468. }],
  469. columnType: [{
  470. required: true,
  471. message: "请输入物理类型",
  472. trigger: "blur"
  473. }],
  474. mask: [{
  475. required: true,
  476. message: "请输入字段显示规则",
  477. trigger: "blur"
  478. }],
  479. sort: [{
  480. required: true,
  481. message: "请输入序号",
  482. trigger: "blur"
  483. }],
  484. },
  485. loadingZd: '',
  486. // 关联表
  487. title: "",
  488. loading: false,
  489. open: false,
  490. form: {},
  491. rules: {
  492. relationParentId: [{
  493. required: true,
  494. message: "请选择关联表",
  495. trigger: "blur"
  496. }],
  497. relationChildId: [{
  498. required: true,
  499. message: "请选择字段",
  500. trigger: "blur"
  501. }],
  502. relationType: [{
  503. required: true,
  504. message: "请选择关联条件",
  505. trigger: "blur"
  506. }],
  507. },
  508. postList: [],
  509. total: 1,
  510. tableList: {},
  511. // 关联方式
  512. // 内嵌编辑
  513. genList: [],
  514. glbParams: {
  515. pageNum: 1,
  516. pageSize: 10,
  517. },
  518. // 关联表查询参数
  519. queryParams: {
  520. relationParentId: this.$route.params && this.$route.params.tableId,
  521. pageNum: 1,
  522. pageSize: 10,
  523. },
  524. // 选中选项卡的 name
  525. activeName: "basic",
  526. // 表格的高度
  527. tableHeight: document.documentElement.scrollHeight - 245 + "px",
  528. // 表信息
  529. tables: [],
  530. // 表列信息
  531. cloumns: [],
  532. // 字典信息
  533. dictOptions: [],
  534. // 菜单信息
  535. menus: [],
  536. // 表详细信息
  537. info: {},
  538. // 选中数组
  539. ids: [],
  540. ids1: [],
  541. // 非单个禁用
  542. single: true,
  543. single1: true,
  544. // 非多个禁用
  545. multiple: true,
  546. multiple1: true,
  547. // 关联方式
  548. relationType: [],
  549. // 内嵌编辑
  550. embedEdit: [],
  551. };
  552. },
  553. filters: {
  554. zdFn(data) {
  555. let is = ''
  556. for (let item of _this.columList) {
  557. if (item.columnId == data) {
  558. is = item.columnName
  559. }
  560. }
  561. return is
  562. },
  563. relationTypeFn(data) {
  564. let is = ''
  565. for (let item of _this.relationType) {
  566. if (item.dictValue == data) {
  567. is = item.dictLabel
  568. }
  569. }
  570. return is
  571. },
  572. embedEditFn(data) {
  573. let is = ''
  574. for (let item of _this.embedEdit) {
  575. if (item.dictValue == data) {
  576. is = item.dictLabel
  577. }
  578. }
  579. return is
  580. },
  581. },
  582. created() {
  583. const tableId = this.$route.params && this.$route.params.tableId;
  584. if (tableId) {
  585. // 获取表详细信息
  586. getGenTable(tableId).then(res => {
  587. this.cloumns = res.data.rows;
  588. this.info = res.data.info;
  589. console.log(this.info,33456)
  590. this.tables = res.data.tables;
  591. });
  592. //查询数据库sql
  593. tableSql(tableId).then(res => {
  594. if (res.data) {
  595. this.tableSqlData = res.data
  596. }
  597. })
  598. /** 查询字典下拉列表 */
  599. getDictOptionselect().then(response => {
  600. this.dictOptions = response.data;
  601. });
  602. // 关联HR字段
  603. genTableColumnList({
  604. tableId,
  605. htmlType: 'HR'
  606. }).then(response => {
  607. this.columHRList = response.rows;
  608. });
  609. // 关联字段
  610. listAllColumnsByTableId({
  611. id:tableId
  612. }).then(response => {
  613. console.log(response.data,9999888)
  614. this.columList = response.data;
  615. });
  616. // 关联表数据
  617. listTable(this.glbParams).then(response => {
  618. this.tableList = response;
  619. });
  620. /** 查询菜单下拉列表 */
  621. // getMenuTreeselect().then(response => {
  622. // this.menus = this.handleTree(response.data, "menuId");
  623. // });
  624. // 关联方式
  625. this.getDicts("relation_type").then(response => {
  626. this.relationType = response.data;
  627. });
  628. // 内嵌编辑
  629. this.getDicts("embed_edit").then(response => {
  630. this.embedEdit = response.data;
  631. });
  632. }
  633. this.tabList()
  634. },
  635. methods: {
  636. tableBtn(row){
  637. this.openquery = false
  638. this.ForeName = row.column_name
  639. this.formZd.foreignKey = row.column_id
  640. },
  641. fkzdFn() {
  642. this.queryedit()
  643. this.getLisail()
  644. this.openquery = true
  645. },
  646. changeFn(obj) {
  647. console.log(obj)
  648. for(let key in obj){
  649. this.formquery.fixedData[key] = obj[key]
  650. }
  651. },
  652. // 快速查询
  653. queryedit(){
  654. this.loading = true;
  655. tableQuery(this.queryLisr).then(response => {
  656. let data = response.data
  657. this.queryData = data
  658. this.loading = false;
  659. })
  660. },
  661. handleQuery(){
  662. for(let item of this.queryData.queryList){
  663. if(item.htmlType == 'checkbox' || item.htmlType == 'imageUpload' || item.htmlType == 'fileUpload'){
  664. this.formquery[item.columnName] = this.$refs[item.columnName][0].config
  665. } else{
  666. this.formquery[item.columnName] = this.$refs[item.columnName][0].config[item.columnName]
  667. }
  668. }
  669. this.aliemg.fixedData.condition = this.formquery
  670. this.getLisail()
  671. },
  672. // 快速查询列表
  673. getLisail() {
  674. this.loading = true;
  675. listIndexfou(this.aliemg).then(response => {
  676. if(response.data){
  677. // this.tableDataalid = response.data.tableHeadList;
  678. this.postListquery = response.data
  679. this.postListquery.rows.filter(route => {
  680. if(route.table_id){
  681. route.table_id = route.table_id.name
  682. }
  683. })
  684. this.totalquery = response.data.total;
  685. }
  686. this.loading = false;
  687. }
  688. );
  689. },
  690. submitFormZd() {
  691. this.$refs["formZd"].validate(valid => {
  692. if (valid) {
  693. const tableId = this.$route.params && this.$route.params.tableId;
  694. this.formZd.tableId = tableId
  695. if (this.formZd.id != undefined) {
  696. setGenTableColumn(this.formZd).then(response => {
  697. this.msgSuccess("修改成功");
  698. this.openZd = false;
  699. // 获取表详细信息
  700. getGenTable(tableId).then(res => {
  701. this.cloumns = res.data.rows;
  702. this.info = res.data.info;
  703. this.tables = res.data.tables;
  704. });
  705. });
  706. } else {
  707. addGenTableColumn(this.formZd).then(response => {
  708. this.msgSuccess("新增成功");
  709. this.openZd = false;
  710. // 获取表详细信息
  711. getGenTable(tableId).then(res => {
  712. this.cloumns = res.data.rows;
  713. this.info = res.data.info;
  714. this.tables = res.data.tables;
  715. });
  716. });
  717. }
  718. }
  719. });
  720. },
  721. sxCreaBtn() {
  722. const tableId = this.$route.params && this.$route.params.tableId
  723. getReload({
  724. tableId,
  725. createSql: this.tableSqlData.createSql,
  726. createLog: this.tableSqlData.createLog,
  727. id: this.tableSqlData.id
  728. }).then(res => {
  729. this.msgSuccess('刷新成功')
  730. //查询数据库sql
  731. tableSql(tableId).then(res => {
  732. if (res.data) {
  733. this.tableSqlData = res.data
  734. }
  735. })
  736. })
  737. },
  738. zxCreaBtn() {
  739. const _this = this
  740. this.$confirm('是否确认执行创建语句?', "警告", {
  741. confirmButtonText: "确定",
  742. cancelButtonText: "取消",
  743. type: "warning"
  744. }).then(function() {
  745. return zxImplement({
  746. tableId: _this.$route.params && _this.$route.params.tableId,
  747. createSql: _this.tableSqlData.createSql,
  748. createLog: _this.tableSqlData.createLog,
  749. id: _this.tableSqlData.id
  750. })
  751. }).then(res => {
  752. _this.msgSuccess('执行成功')
  753. })
  754. },
  755. dbSelectedZd(row) {
  756. this.reset();
  757. const id = row.id
  758. getByIdWithForeignKey(id).then(response => {
  759. let data = response.data
  760. data.foreignKey = data.foreignKey ? data.foreignKey - 0 : ''
  761. this.formZd = data;
  762. if(data.fkInfo){
  763. this.ForeName = data.fkInfo.value
  764. }
  765. this.openZd = true;
  766. this.title = "修改字段信息";
  767. });
  768. },
  769. dbSelected(row) {
  770. this.reset();
  771. const id = row.id
  772. qurGenTable(id).then(response => {
  773. let data = response.data
  774. data.relationType = data.relationType + ""
  775. data.embedEdit = data.embedEdit?(data.embedEdit + ""): data.embedEdit
  776. getGenTable(data.relationParentId).then(res => {
  777. this.genList = res.data.rows;
  778. this.form = data;
  779. this.open = true;
  780. this.title = "修改关联表";
  781. });
  782. });
  783. },
  784. addGlfn() {
  785. this.$refs["form"].validate(valid => {
  786. if (valid) {
  787. let datas = JSON.parse(JSON.stringify(this.form))
  788. datas.relationParentId = this.info.tableId
  789. if (this.form.id != undefined) {
  790. setGenTable(datas).then(response => {
  791. this.msgSuccess("修改成功");
  792. this.open = false;
  793. this.tabList();
  794. });
  795. } else {
  796. addGenTable(datas).then(response => {
  797. this.msgSuccess("新增成功");
  798. this.open = false;
  799. this.tabList();
  800. });
  801. }
  802. }
  803. });
  804. },
  805. relationFn(data) {
  806. getGenTable(data).then(res => {
  807. this.genList = res.data.rows;
  808. });
  809. },
  810. loadMore() {
  811. const _this = this
  812. let num = _this.tableList.total % 10 == 0 ? _this.tableList.total / 10 : ((_this.tableList.total - _this.tableList
  813. .total % 10) / 10 + 1)
  814. console.log(num, 1)
  815. if (this.glbParams.pageNum < num) {
  816. this.glbParams.pageNum++
  817. // 关联表数据
  818. listTable(this.glbParams).then(response => {
  819. let data = response
  820. data.rows = _this.tableList.rows.concat(data.rows)
  821. _this.tableList = data;
  822. });
  823. }
  824. },
  825. // 取消按钮
  826. cancel() {
  827. this.open = false;
  828. this.reset();
  829. this.openZd = false;
  830. this.resetZd();
  831. },
  832. // 关联表数据
  833. tabList() {
  834. this.loading = true;
  835. tabList(this.queryParams).then(response => {
  836. this.postList = response.rows;
  837. this.total = response.total;
  838. this.loading = false;
  839. });
  840. },
  841. /** 新增按钮操作 */
  842. handleAdd_gl() {
  843. this.reset();
  844. this.open = true;
  845. console.log(this.form)
  846. this.title = "新增关联表";
  847. },
  848. handleDel_gl(row) {
  849. const ids = row.id || this.ids1;
  850. this.$confirm('是否确认删除id为"' + ids + '"的数据项?', "警告", {
  851. confirmButtonText: "确定",
  852. cancelButtonText: "取消",
  853. type: "warning"
  854. }).then(function() {
  855. return delGenTable(ids);
  856. }).then(() => {
  857. this.tabList();
  858. this.msgSuccess("删除成功");
  859. })
  860. },
  861. // 表单重置
  862. reset() {
  863. this.form = {
  864. isDel: 'N'
  865. };
  866. this.resetForm("form");
  867. },
  868. resetZd() {
  869. this.formZd = {
  870. };
  871. this.resetForm("formZd");
  872. },
  873. /** 提交按钮 */
  874. submitForm() {
  875. let isInFlag = 0
  876. let isOutFlag = 0
  877. for(let item of this.cloumns){
  878. if(item.isIn=='Y'){
  879. isInFlag++
  880. }
  881. if(item.isOut=='Y'){
  882. isOutFlag++
  883. }
  884. }
  885. if(isInFlag>1){
  886. this.msgError('"输入字段"最多只能选择一个!')
  887. return
  888. }
  889. if(isOutFlag>1){
  890. this.msgError('"显示字段"最多只能选择一个!')
  891. return
  892. }
  893. const basicForm = this.$refs.basicInfo.$refs.basicInfoForm;
  894. // const genForm = this.$refs.genInfo.$refs.genInfoForm;
  895. Promise.all([basicForm].map(this.getFormPromise)).then(res => {
  896. const validateResult = res.every(item => !!item);
  897. if (validateResult) {
  898. const genTable = Object.assign({}, basicForm.model);
  899. genTable.columns = this.cloumns;
  900. // genTable.params = {
  901. // treeCode: genTable.treeCode,
  902. // treeName: genTable.treeName,
  903. // treeParentCode: genTable.treeParentCode,
  904. // parentMenuId: genTable.parentMenuId
  905. // };
  906. console.log(genTable)
  907. if(this.activeName=='basic'){
  908. genTable.updateType ='1'
  909. }
  910. if(this.activeName=='cloum'){
  911. genTable.updateType ='2'
  912. }
  913. updateGenTable(genTable).then(res => {
  914. this.msgSuccess(res.msg);
  915. if (res.code === 200) {
  916. this.close();
  917. }
  918. });
  919. } else {
  920. this.msgError("表单校验未通过,请重新检查提交内容");
  921. }
  922. });
  923. },
  924. getFormPromise(form) {
  925. return new Promise(resolve => {
  926. form.validate(res => {
  927. resolve(res);
  928. });
  929. });
  930. },
  931. /** 关闭按钮 */
  932. close() {
  933. this.$store.dispatch("tagsView/delView", this.$route);
  934. this.$router.push({
  935. path: "/tool/gen",
  936. query: {
  937. t: Date.now()
  938. }
  939. })
  940. },
  941. // 多选框选中数据
  942. handleSelectionChange(selection) {
  943. this.ids = selection.map(item => item.id)
  944. this.single = selection.length != 1
  945. this.multiple = !selection.length
  946. },
  947. // 多选框选中数据
  948. handleSelectionChange1(selection) {
  949. this.ids1 = selection.map(item => item.id)
  950. this.single1 = selection.length != 1
  951. this.multiple1 = !selection.length
  952. },
  953. /** 删除按钮操作 */
  954. handleDelete(row) {
  955. const ids = row.id || this.ids;
  956. const tableId = this.$route.params && this.$route.params.tableId;
  957. this.$confirm('是否确认删除字段编号为"' + ids + '"的数据项?', "警告", {
  958. confirmButtonText: "确定",
  959. cancelButtonText: "取消",
  960. type: "warning"
  961. }).then(function() {
  962. return delGenTableColumn(ids);
  963. }).then(() => {
  964. // 获取表详细信息
  965. getGenTable(tableId).then(res => {
  966. this.cloumns = res.data.rows;
  967. this.info = res.data.info;
  968. this.tables = res.data.tables;
  969. });
  970. this.msgSuccess("删除成功");
  971. })
  972. },
  973. handleAdd() {
  974. this.resetZd();
  975. this.openZd = true;
  976. this.title = "新增字段信息";
  977. }
  978. },
  979. mounted() {
  980. const el = this.$refs.dragTable.$el.querySelectorAll(".el-table__body-wrapper > table > tbody")[0];
  981. const sortable = Sortable.create(el, {
  982. handle: ".allowDrag",
  983. onEnd: evt => {
  984. const targetRow = this.cloumns.splice(evt.oldIndex, 1)[0];
  985. this.cloumns.splice(evt.newIndex, 0, targetRow);
  986. for (let index in this.cloumns) {
  987. this.cloumns[index].sort = parseInt(index) + 1;
  988. }
  989. }
  990. });
  991. }
  992. };
  993. </script>
  994. <style lang="scss">
  995. .pagination-container {
  996. height: 35px;
  997. }
  998. .resizeNone {
  999. width: 60vw;
  1000. border-radius: 3px;
  1001. .el-textarea__inner {
  1002. //el_input中的隐藏属性
  1003. resize: none; //主要是这个样式
  1004. height: 200px;
  1005. }
  1006. }
  1007. </style>