add-dialog.vue 9.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307
  1. <script>
  2. import { item, add } from "@/api/system/table-template";
  3. export default {
  4. name: "AddDialog",
  5. data() {
  6. const dict = {
  7. status: [
  8. { label: "启用", value: "0" },
  9. { label: "停用", value: "2" },
  10. ],
  11. };
  12. const columns = [
  13. {
  14. type: "text",
  15. prop: "templateCode",
  16. label: "模板编码",
  17. },
  18. {
  19. type: "text",
  20. prop: "templateName",
  21. label: "模板名称",
  22. },
  23. {
  24. type: "text",
  25. prop: "desc",
  26. label: "描述",
  27. },
  28. {
  29. type: "text",
  30. prop: "remark",
  31. label: "备注",
  32. },
  33. {
  34. type: "select",
  35. prop: "status",
  36. label: "启用状态",
  37. },
  38. {
  39. type: "text",
  40. prop: "createBy",
  41. label: "创建者",
  42. disabled: true,
  43. readonly: true,
  44. },
  45. {
  46. type: "text",
  47. prop: "createTime",
  48. label: "创建时间",
  49. disabled: true,
  50. readonly: true,
  51. },
  52. {
  53. type: "text",
  54. prop: "updateBy",
  55. label: "更新者",
  56. disabled: true,
  57. readonly: true,
  58. },
  59. {
  60. type: "text",
  61. prop: "updateTime",
  62. label: "更新时间",
  63. disabled: true,
  64. readonly: true,
  65. },
  66. ];
  67. const initDict = () => dict;
  68. const initColumns = () => columns;
  69. const initForm = () => {
  70. let form = { sysTemplateItemList: [] };
  71. initColumns().forEach((item) => (form[item.prop] = ""));
  72. return form;
  73. };
  74. return {
  75. loading: false,
  76. dialogFormVisible: false,
  77. form: initForm(),
  78. columns: initColumns(),
  79. dict: initDict(),
  80. };
  81. },
  82. methods: {
  83. //
  84. fetchItem(prop) {
  85. let { id } = prop;
  86. this.loading = true;
  87. this.dialogFormVisible = true;
  88. item(id)
  89. .then((res) => {
  90. let { data } = res;
  91. this.form = data;
  92. this.form.sysTemplateItemList = data.sysTemplateItemList.map(
  93. (item) => ({
  94. ...item,
  95. isEdit: item.isEdit === "1" ? true : false,
  96. isShow: item.isShow === "1" ? true : false,
  97. isRequired: item.isRequired === "1" ? true : false,
  98. })
  99. );
  100. })
  101. .finally(() => {
  102. this.loading = false;
  103. });
  104. },
  105. //
  106. onAddRow() {
  107. this.form.sysTemplateItemList.push({
  108. id: "",
  109. isEdit: true,
  110. isShow: true,
  111. isRequired: true,
  112. });
  113. },
  114. //
  115. onMoveRow(index1, index2) {
  116. let swapArr = (arr, index1, index2) => {
  117. arr[index1] = arr.splice(index2, 1, arr[index1])[0];
  118. return arr;
  119. };
  120. this.form.sysTemplateItemList = swapArr(
  121. this.form.sysTemplateItemList,
  122. index1 - 1,
  123. index2
  124. );
  125. },
  126. //
  127. onRemoveRow(prop) {
  128. let { code } = prop;
  129. this.form.sysTemplateItemList = this.form.sysTemplateItemList.filter(
  130. (item) => item.code !== code
  131. );
  132. },
  133. //
  134. onSubmit() {
  135. this.loading = true;
  136. this.form.id = "";
  137. this.form.sysTemplateItemList = this.form.sysTemplateItemList.map(
  138. (item, index) => ({
  139. ...item,
  140. id: "",
  141. sort: String(index),
  142. isEdit: item.isEdit === true ? "1" : "0",
  143. isShow: item.isShow === true ? "1" : "0",
  144. isRequired: item.isRequired === true ? "1" : "0",
  145. })
  146. );
  147. add(this.form)
  148. .then((res) => {
  149. let { code } = res;
  150. if (code == 200) {
  151. this.dialogFormVisible = false;
  152. this.$message.success("新增成功");
  153. this.$parent.$children
  154. .find((el) => el.$vnode.tag.indexOf("SearchTable") > -1)
  155. .fetchList();
  156. }
  157. })
  158. .finally(() => {
  159. this.loading = false;
  160. });
  161. },
  162. },
  163. created() {},
  164. };
  165. </script>
  166. <template>
  167. <el-dialog
  168. fullscreen
  169. destroy-on-close
  170. title="复制"
  171. width="75%"
  172. :visible.sync="dialogFormVisible"
  173. >
  174. <el-row v-loading="loading" :gutter="20">
  175. <el-form size="mini" :model="form" label-position="top">
  176. <el-col v-for="column in columns" :key="column.prop" :span="6">
  177. <el-form-item :label="column.label">
  178. <el-input
  179. v-if="column.type === 'text'"
  180. v-model="form[column.prop]"
  181. :disabled="column.disabled"
  182. :readonly="column.readonly"
  183. ></el-input>
  184. <el-select
  185. v-if="column.type === 'select'"
  186. v-model="form[column.prop]"
  187. style="width: 100%"
  188. >
  189. <el-option label="启用" value="0"></el-option>
  190. <el-option label="停用" value="2"></el-option>
  191. </el-select>
  192. </el-form-item>
  193. </el-col>
  194. <el-col :span="24">
  195. <el-form-item label="模板配置">
  196. <template #label>
  197. <span style="margin-right: 12px">模板配置</span>
  198. <el-button
  199. @click.native.prevent="onAddRow"
  200. icon="el-icon-plus"
  201. circle
  202. >
  203. </el-button>
  204. </template>
  205. <el-table height="450" :data="form.sysTemplateItemList">
  206. <el-table-column type="index" width="50"> </el-table-column>
  207. <el-table-column prop="code" label="字段编码" width="200">
  208. <template slot-scope="scope">
  209. <el-input v-model="scope.row.code"></el-input>
  210. </template>
  211. </el-table-column>
  212. <el-table-column prop="name" label="字段名称" width="200">
  213. <template slot-scope="scope">
  214. <el-input v-model="scope.row.name"></el-input>
  215. </template>
  216. </el-table-column>
  217. <el-table-column prop="isEdit" label="是否编辑">
  218. <template slot-scope="scope">
  219. <el-switch v-model="scope.row.isEdit"> </el-switch>
  220. </template>
  221. </el-table-column>
  222. <el-table-column prop="isShow" label="是否显示">
  223. <template slot-scope="scope">
  224. <el-switch v-model="scope.row.isShow"> </el-switch>
  225. </template>
  226. </el-table-column>
  227. <el-table-column prop="isRequired" label="是否必填">
  228. <template slot-scope="scope">
  229. <el-switch v-model="scope.row.isRequired"> </el-switch>
  230. </template>
  231. </el-table-column>
  232. <el-table-column
  233. prop="conditionType"
  234. label="字段类型"
  235. width="200"
  236. >
  237. <template slot-scope="scope">
  238. <el-input v-model="scope.row.conditionType"></el-input>
  239. </template>
  240. </el-table-column>
  241. <el-table-column prop="dictId" label="字典ID" width="200">
  242. <template slot-scope="scope">
  243. <el-input v-model="scope.row.dictId"></el-input>
  244. </template>
  245. </el-table-column>
  246. <el-table-column
  247. prop="textAttribute"
  248. label="文本类型"
  249. width="200"
  250. >
  251. <template slot-scope="scope">
  252. <el-input v-model="scope.row.textAttribute"></el-input>
  253. </template>
  254. </el-table-column>
  255. <el-table-column prop="checkRule" label="校验规则" width="200">
  256. <template slot-scope="scope">
  257. <el-input v-model="scope.row.checkRule"></el-input>
  258. </template>
  259. </el-table-column>
  260. <el-table-column fixed="right" label="操作" width="150">
  261. <template slot-scope="scope">
  262. <el-popover
  263. placement="left"
  264. width="200"
  265. trigger="click"
  266. style="margin-right: 8px"
  267. >
  268. <el-input-number
  269. v-model="scope.row.sort"
  270. controls-position="right"
  271. @change="onMoveRow($event, scope.$index)"
  272. :min="1"
  273. :max="form.sysTemplateItemList.length"
  274. ></el-input-number>
  275. <el-button
  276. slot="reference"
  277. icon="el-icon-watermelon"
  278. circle
  279. >
  280. </el-button>
  281. </el-popover>
  282. <el-button
  283. @click.native.prevent="onRemoveRow(scope.row)"
  284. icon="el-icon-remove"
  285. circle
  286. >
  287. </el-button>
  288. </template>
  289. </el-table-column>
  290. </el-table>
  291. </el-form-item>
  292. </el-col>
  293. </el-form>
  294. </el-row>
  295. <div slot="footer">
  296. <el-button :disabled="loading" @click="dialogFormVisible = false"
  297. >取 消</el-button
  298. >
  299. <el-button type="primary" :disabled="loading" @click="onSubmit"
  300. >确 定</el-button
  301. >
  302. </div>
  303. </el-dialog>
  304. </template>
  305. <style scoped></style>