index.vue 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246
  1. <template>
  2. <div class="page">
  3. <el-card shadow="nover">
  4. <el-form :model="tableData.param" ref="queryRef" inline>
  5. <!-- <el-form-item label="模型标识" prop="key">
  6. <el-input v-model="tableData.param.key" placeholder="请输入模型标识" clearable style="width: 240px" @keyup.enter.native="typeList" />
  7. </el-form-item> -->
  8. <el-form-item label="模型名称" prop="name">
  9. <el-input v-model="tableData.param.name" placeholder="请输入" clearable style="width: 240px" @keyup.enter.native="typeList" />
  10. </el-form-item>
  11. <el-form-item label="模型类型" prop="type">
  12. <el-select v-model="tableData.param.type" placeholder="请选择" class="w100">
  13. <el-option v-for="item in datahub_model_type" :key="item.value" :label="item.label" :value="item.value" />
  14. </el-select>
  15. </el-form-item>
  16. <el-form-item>
  17. <el-button type="primary" class="ml10" @click="typeList">
  18. <el-icon>
  19. <ele-Search />
  20. </el-icon>
  21. 查询
  22. </el-button>
  23. <el-button @click="resetQuery(queryRef)">
  24. <el-icon>
  25. <ele-Refresh />
  26. </el-icon>
  27. 重置
  28. </el-button>
  29. <el-button type="primary" class="ml10" @click="onOpenAdd" v-auth="'add'">
  30. <el-icon>
  31. <ele-FolderAdd />
  32. </el-icon>
  33. 新增模型
  34. </el-button>
  35. <el-button type="info" class="ml10" @click="onRowDel()" v-auth="'del'">
  36. <el-icon>
  37. <ele-Delete />
  38. </el-icon>
  39. 删除
  40. </el-button>
  41. </el-form-item>
  42. </el-form>
  43. <el-table :data="tableData.data" style="width: 100%" @selection-change="handleSelectionChange" v-loading="tableData.loading">
  44. <el-table-column type="selection" width="55" align="center" />
  45. <el-table-column label="ID" align="center" prop="id" width="100" v-col="'id'" />
  46. <!-- <el-table-column label="模型标识" prop="key" show-overflow-tooltip v-col="'key'"/> -->
  47. <el-table-column label="模型名称" prop="name" show-overflow-tooltip v-col="'name'" />
  48. <el-table-column label="类型" prop="typeName" show-overflow-tooltip v-col="'typeName'" />
  49. <el-table-column label="描述" prop="desc" show-overflow-tooltip v-col="'desc'" />
  50. <el-table-column prop="status" label="状态" width="100" align="center" v-col="'status'">
  51. <template #default="scope">
  52. <el-tag type="success" size="small" v-if="scope.row.status == 1">已发布</el-tag>
  53. <el-tag type="info" size="small" v-else>未发布</el-tag>
  54. </template>
  55. </el-table-column>
  56. <el-table-column prop="createdAt" label="创建时间" width="200" align="center" v-col="'createdAt'"></el-table-column>
  57. <el-table-column label="操作" width="280" align="center" fixed="right">
  58. <template #default="scope">
  59. <router-link :to="'/datahub/modeling/' + scope.row.id" class="link-type" style="padding-right: 12px; font-size: 12px; color: #409eff" v-auth="'detail'">
  60. <span>字段管理</span>
  61. </router-link>
  62. <el-button size="small" text type="success" @click="onOpenRecord(scope.row)" v-if="scope.row.status == 1" v-auth="'record'">数据记录</el-button>
  63. <el-button size="small" text type="info" :disabled="scope.row.status" @click="onOpenJuhe(scope.row)" v-auth="'juhe'">聚合设置</el-button>
  64. <el-button size="small" text type="warning" @click="onOpenEdit(scope.row)" v-if="scope.row.status == 0" v-auth="'edit'">修改</el-button>
  65. <el-button size="small" text type="info" @click="onRowDel(scope.row)" v-if="scope.row.status == 0" v-auth="'del'">删除</el-button>
  66. <el-button size="small" text type="primary" @click="copy(scope.row)" v-auth="'copy'">复制</el-button>
  67. </template>
  68. </el-table-column>
  69. </el-table>
  70. <pagination v-show="tableData.total > 0" :total="tableData.total" v-model:page="tableData.param.pageNum" v-model:limit="tableData.param.pageSize" @pagination="typeList" />
  71. </el-card>
  72. <EditDic ref="editDicRef" @typeList="typeList" />
  73. <Detail ref="detailRef" />
  74. <Juhe ref="juheRef" />
  75. </div>
  76. </template>
  77. <script lang="ts">
  78. import { toRefs, reactive, onMounted, ref, defineComponent, getCurrentInstance } from 'vue';
  79. import { ElMessageBox, ElMessage, FormInstance } from 'element-plus';
  80. import EditDic from './component/edit.vue';
  81. import Detail from './component/detail.vue';
  82. import Juhe from './component/juhe.vue';
  83. import api from '/@/api/datahub';
  84. // 定义接口来定义对象的类型
  85. interface TableDataRow {
  86. id: number;
  87. name: string;
  88. key: string;
  89. createBy: string;
  90. }
  91. interface TableDataState {
  92. ids: number[];
  93. tableData: {
  94. data: Array<TableDataRow>;
  95. total: number;
  96. loading: boolean;
  97. param: {
  98. pageNum: number;
  99. pageSize: number;
  100. name: string;
  101. key: string;
  102. type: string;
  103. };
  104. };
  105. }
  106. export default defineComponent({
  107. name: 'sourcelist',
  108. components: { EditDic, Detail, Juhe },
  109. setup() {
  110. const addDicRef = ref();
  111. const editDicRef = ref();
  112. const juheRef = ref();
  113. const detailRef = ref();
  114. const queryRef = ref();
  115. const { proxy } = getCurrentInstance() as any;
  116. const { datahub_model_type } = proxy.useDict('datahub_model_type');
  117. const state = reactive<TableDataState>({
  118. tableData: {
  119. data: [],
  120. total: 0,
  121. loading: false,
  122. param: {
  123. pageNum: 1,
  124. pageSize: 20,
  125. name: '',
  126. key: '',
  127. type: '',
  128. },
  129. },
  130. });
  131. // 初始化表格数据
  132. const initTableData = () => {
  133. typeList();
  134. };
  135. const typeList = () => {
  136. state.tableData.loading = true;
  137. api.template
  138. .getList(state.tableData.param)
  139. .then((res: any) => {
  140. state.tableData.data = res.list;
  141. state.tableData.total = res.Total;
  142. })
  143. .finally(() => (state.tableData.loading = false));
  144. };
  145. // 打开新增菜单弹窗
  146. const onOpenAdd = (row?: TableDataRow) => {
  147. editDicRef.value.openDialog(row?.id);
  148. };
  149. // 打开修改模型弹窗
  150. const onOpenEdit = (row: TableDataRow) => {
  151. editDicRef.value.openDialog({ ...row });
  152. };
  153. //打开数据记录
  154. const onOpenRecord = (row: TableDataRow) => {
  155. detailRef.value.openDialog(row);
  156. };
  157. //聚合设置
  158. const onOpenJuhe = (row: TableDataRow) => {
  159. juheRef.value.openDialog(row);
  160. };
  161. const onRowDel = (row?: TableDataRow) => {
  162. let msg = '你确定要删除所选数据?';
  163. let ids: number[] = [];
  164. if (row) {
  165. msg = `此操作将永久删除模型:“${row.name}”,是否继续?`;
  166. ids = [row.id];
  167. } else {
  168. ids = state.ids;
  169. }
  170. if (ids.length === 0) {
  171. ElMessage.error('请选择要删除的数据。');
  172. return;
  173. }
  174. ElMessageBox.confirm(msg, '提示', {
  175. confirmButtonText: '确认',
  176. cancelButtonText: '取消',
  177. type: 'warning',
  178. })
  179. .then(() => {
  180. api.template.delete(ids).then(() => {
  181. ElMessage.success('删除成功');
  182. typeList();
  183. });
  184. })
  185. .catch(() => { });
  186. };
  187. //复制数据
  188. const copy = (row: TableDataRow) => {
  189. ElMessageBox.confirm('确定要复制该数据吗?', '提示', {
  190. confirmButtonText: '确认',
  191. cancelButtonText: '取消',
  192. type: 'warning',
  193. })
  194. .then(() => {
  195. api.template.copy({ id: row.id }).then(() => {
  196. ElMessage.success('复制成功');
  197. typeList();
  198. });
  199. })
  200. .catch(() => { });
  201. };
  202. // 页面加载时
  203. onMounted(() => {
  204. initTableData();
  205. });
  206. /** 重置按钮操作 */
  207. const resetQuery = (formEl: FormInstance | undefined) => {
  208. if (!formEl) return;
  209. formEl.resetFields();
  210. typeList();
  211. };
  212. // 多选框选中数据
  213. const handleSelectionChange = (selection: TableDataRow[]) => {
  214. state.ids = selection.map((item) => item.id);
  215. };
  216. return {
  217. addDicRef,
  218. editDicRef,
  219. detailRef,
  220. juheRef,
  221. queryRef,
  222. onOpenRecord,
  223. onOpenJuhe,
  224. datahub_model_type,
  225. onOpenAdd,
  226. onOpenEdit,
  227. onRowDel,
  228. copy,
  229. typeList,
  230. resetQuery,
  231. handleSelectionChange,
  232. ...toRefs(state),
  233. };
  234. },
  235. });
  236. </script>