editNode.vue 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311
  1. <template>
  2. <div class="system-edit-dic-container">
  3. <el-dialog :title="(ruleForm.id !== 0 ? '修改' : '添加') + '字段节点'" v-model="isShowDialog" width="769px">
  4. <el-form :model="ruleForm" ref="formRef" :rules="rules" size="default" label-width="110px">
  5. <el-form-item label="类型" prop="from">
  6. <el-radio-group v-model="ruleForm.from">
  7. <el-radio :label="1">自定义</el-radio>
  8. <el-radio :label="2">数据源</el-radio>
  9. </el-radio-group>
  10. </el-form-item>
  11. <div v-if="ruleForm.from==2">
  12. <el-form-item label="数据源" prop="sourceId">
  13. <el-select v-model="ruleForm.sourceId" filterable placeholder="请选择数据源" @change="getNodeList">
  14. <el-option
  15. v-for="item in sourceData"
  16. :key="item.sourceId"
  17. :label="item.key"
  18. :value="item.sourceId"
  19. >
  20. <span style="float: left">{{ item.key }}</span>
  21. <span
  22. style="
  23. float: right;
  24. font-size: 13px;
  25. "
  26. >{{ item.name }}</span
  27. >
  28. </el-option>
  29. </el-select>
  30. </el-form-item>
  31. <el-form-item label="数据源节点" prop="nodeId">
  32. <el-select v-model="ruleForm.nodeId" filterable placeholder="请选择数据源" @change="setNode">
  33. <el-option
  34. v-for="item in nodeData"
  35. :key="item.nodeId"
  36. :label="item.key"
  37. :value="item.nodeId"
  38. >
  39. <span style="float: left">{{ item.key }}</span>
  40. <span
  41. style="
  42. float: right;
  43. font-size: 13px;
  44. "
  45. >{{ item.name }}</span
  46. >
  47. </el-option>
  48. </el-select>
  49. </el-form-item>
  50. </div>
  51. <el-form-item label="字段节点标识" prop="key">
  52. <el-input v-model="ruleForm.key" placeholder="请输入字段节点名称" />
  53. </el-form-item>
  54. <el-form-item label="字段节点名称" prop="name">
  55. <el-input v-model="ruleForm.name" placeholder="请输入字段节点名称" />
  56. </el-form-item>
  57. <el-form-item label="数据类型" prop="dataType">
  58. <el-select v-model="ruleForm.dataType" filterable placeholder="请选择数据类型" >
  59. <el-option
  60. v-for="item in tabData"
  61. :key="item.value"
  62. :label="item.label"
  63. :value="item.value"
  64. />
  65. </el-select>
  66. </el-form-item>
  67. <el-form-item label="默认值" prop="default">
  68. <el-input v-model="ruleForm.default" placeholder="请输入取值项" />
  69. </el-form-item>
  70. <el-form-item label="描述" prop="desc">
  71. <el-input v-model="ruleForm.desc" type="textarea" placeholder="请输入内容"></el-input>
  72. </el-form-item>
  73. </el-form>
  74. <template #footer>
  75. <span class="dialog-footer">
  76. <el-button @click="onCancel" size="default">取 消</el-button>
  77. <el-button type="primary" @click="onSubmit" size="default">{{ ruleForm.id !== 0 ? '修 改' : '添 加' }}</el-button>
  78. </span>
  79. </template>
  80. </el-dialog>
  81. </div>
  82. </template>
  83. <script lang="ts">
  84. import { reactive, toRefs, defineComponent, ref, unref } from 'vue';
  85. import api from '/@/api/datahub';
  86. import { ElMessage } from 'element-plus';
  87. import { Delete, Minus, Right } from '@element-plus/icons-vue';
  88. interface RuleFormState {
  89. id: number;
  90. name: string;
  91. from: number;
  92. sourceId: number;
  93. nodeId: number;
  94. key: string;
  95. dataType: string;
  96. default: string;
  97. desc: string;
  98. status: number;
  99. }
  100. interface DicState {
  101. isShowDialog: boolean;
  102. ruleForm: RuleFormState;
  103. rules: {};
  104. }
  105. export default defineComponent({
  106. name: 'Edit',
  107. components: { Delete, Minus, Right },
  108. setup(prop, { emit }) {
  109. const editDicRef = ref();
  110. const formRef = ref<HTMLElement | null>(null);
  111. const state = reactive<DicState>({
  112. isShowDialog: false,
  113. tabData:[{
  114. label: 'varchar',
  115. value: 'varchar',
  116. },{
  117. label: 'string',
  118. value: 'string',
  119. },{
  120. label: 'int',
  121. value: 'int',
  122. },{
  123. label: 'bigint',
  124. value: 'bigint',
  125. },{
  126. label: 'tinyint',
  127. value: 'tinyint',
  128. },{
  129. label: 'float',
  130. value: 'float',
  131. },{
  132. label: 'double',
  133. value: 'double',
  134. },{
  135. label: 'text',
  136. value: 'text',
  137. },{
  138. label: 'datetime',
  139. value: 'datetime',
  140. },{
  141. label: 'timestamp',
  142. value: 'timestamp',
  143. }],
  144. sourceData:[],
  145. nodeData:[],
  146. ruleForm: {
  147. id: 0,
  148. sourceId:0,
  149. nodeId:0,
  150. name: '',
  151. key: '',
  152. from:1,
  153. default:'',
  154. desc: '',
  155. },
  156. rules: {
  157. key: [{ required: true, message: '字段节点标识不能为空', trigger: 'blur' }],
  158. name: [{ required: true, message: '字段节点名称不能为空', trigger: 'blur' }],
  159. dataType: [{ required: true, message: '字段节点类型不能为空', trigger: 'blur' }],
  160. value: [{ required: true, message: '字段节点取值项不能为空', trigger: 'blur' }],
  161. },
  162. });
  163. // 打开弹窗
  164. const openDialog = (row: RuleFormState | null) => {
  165. resetForm();
  166. console.log(row);
  167. if (row?.id) {
  168. state.ruleForm = row
  169. }
  170. if(row.sourceId){
  171. getNodeList(row.sourceId);
  172. }
  173. state.ruleForm = row
  174. state.isShowDialog = true;
  175. getSouData();
  176. };
  177. const getSouData=()=>{
  178. api.common.getList({
  179. pageNum: 1,
  180. pageSize: 50,
  181. }).then((res: any) => {
  182. state.sourceData = res.list;
  183. });
  184. };
  185. const getNodeList=(event)=>{
  186. api.node.getList({
  187. pageNum: 1,
  188. pageSize: 50,
  189. sourceId: event,
  190. }).then((res: any) => {
  191. state.nodeData = res.list;
  192. });
  193. };
  194. const setNode=(event)=>{
  195. state.nodeData.forEach((item, index) => {
  196. if(item.nodeId==event){
  197. state.ruleForm.name=item.name;
  198. state.ruleForm.key=item.key;
  199. state.ruleForm.dataType=item.dataType;
  200. }
  201. })
  202. };
  203. const resetForm = () => {
  204. state.ruleForm = {
  205. id: 0,
  206. name: '',
  207. sourceId:0,
  208. nodeId:0,
  209. key: '',
  210. from:1,
  211. default:'',
  212. desc: '',
  213. };
  214. };
  215. // 关闭弹窗
  216. const closeDialog = () => {
  217. state.isShowDialog = false;
  218. };
  219. // 取消
  220. const onCancel = () => {
  221. closeDialog();
  222. };
  223. // 新增
  224. const onSubmit = () => {
  225. const formWrap = unref(formRef) as any;
  226. if (!formWrap) return;
  227. formWrap.validate((valid: boolean) => {
  228. if (valid) {
  229. if (state.ruleForm.id !== 0) {
  230. //修改
  231. api.tnode.edit(state.ruleForm).then(() => {
  232. ElMessage.success('字段节点类型修改成功');
  233. closeDialog(); // 关闭弹窗
  234. emit('typeList');
  235. });
  236. } else {
  237. //添加
  238. api.tnode.add(state.ruleForm).then(() => {
  239. ElMessage.success('字段节点类型添加成功');
  240. closeDialog(); // 关闭弹窗
  241. emit('typeList');
  242. });
  243. }
  244. }
  245. });
  246. };
  247. return {
  248. getSouData,
  249. getNodeList,
  250. setNode,
  251. openDialog,
  252. closeDialog,
  253. onCancel,
  254. onSubmit,
  255. formRef,
  256. ...toRefs(state),
  257. };
  258. },
  259. });
  260. </script>