潘志宝
2024-11-22 df90c0c5cfa4de114798015b92120ad8ba8b4826
提交 | 用户 | 时间
1f93e9 1 <template>
2   <!-- 搜索工作栏 -->
3   <ContentWrap>
4     <el-form
5       ref="queryFormRef"
6       :inline="true"
7       :model="queryParams"
8       class="-mb-15px"
9       label-width="68px"
10     >
11       <el-form-item label="名称" prop="name">
12         <el-input
13           v-model="queryParams.name"
14           class="!w-240px"
15           clearable
16           placeholder="请输入名称"
17           @keyup.enter="handleQuery"
18         />
19       </el-form-item>
20       <el-form-item>
21         <el-button @click="handleQuery">
22           <Icon class="mr-5px" icon="ep:search" />
23           搜索
24         </el-button>
25         <el-button @click="resetQuery">
26           <Icon class="mr-5px" icon="ep:refresh" />
27           重置
28         </el-button>
29         <el-button
f87d4e 30           v-hasPermi="['data:ind-data-set:create']"
1f93e9 31           plain
32           type="primary"
33           @click="openForm('create')"
34         >
35           <Icon class="mr-5px" icon="ep:plus" />
36           新增
37         </el-button>
38       </el-form-item>
39     </el-form>
40   </ContentWrap>
41
42   <!-- 列表 -->
43   <ContentWrap>
44     <el-table v-loading="loading" :data="list">
45       <el-table-column align="center" label="名称" prop="name" show-overflow-tooltip />
46       <el-table-column align="center" label="备注" prop="remark" />
47       <el-table-column
48         :formatter="dateFormatter"
49         align="center"
50         label="创建时间"
51         prop="createTime"
52         width="180"
53       />
54       <el-table-column align="center" label="操作">
55         <template #default="scope">
56           <el-button
f87d4e 57             v-hasPermi="['data:ind-data-set:update']"
1f93e9 58             link
59             type="primary"
60             @click="openForm('update', scope.row.id)"
61           >
62             修改
63           </el-button>
f87d4e 64           <router-link :to="'/ind/data/field/' + scope.row.id">
1f93e9 65             <el-button link type="primary">字段</el-button>
66           </router-link>
67           <el-button
f87d4e 68             v-hasPermi="['data:ind-data-set:delete']"
1f93e9 69             link
70             type="danger"
71             @click="handleDelete(scope.row.id)"
72           >
73             删除
74           </el-button>
75         </template>
76       </el-table-column>
77     </el-table>
78     <!-- 分页 -->
79     <Pagination
80       v-model:limit="queryParams.pageSize"
81       v-model:page="queryParams.pageNo"
82       :total="total"
83       @pagination="getList"
84     />
85   </ContentWrap>
86
87   <!-- 表单弹窗:添加/修改 -->
88   <DataSetForm ref="formRef" @success="getList" />
89 </template>
90
91 <script lang="ts" setup>
92   import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
93   import { dateFormatter } from '@/utils/formatTime'
94   import * as DataSetApi from '@/api/data/ind/data/data.set'
95   import DataSetForm from './DataSetForm.vue'
96   import download from '@/utils/download'
97
98   defineOptions({ name: 'IndDataSet' })
99
100   const message = useMessage() // 消息弹窗
101   const { t } = useI18n() // 国际化
102
103   const loading = ref(true) // 列表的加载中
104   const total = ref(0) // 列表的总页数
105   const list = ref([]) // 字典表格数据
106   const queryParams = reactive({
107     pageNo: 1,
108     pageSize: 10,
109     name: ''
110   })
111   const queryFormRef = ref() // 搜索的表单
112   const exportLoading = ref(false) // 导出的加载中
113
114   /** 查询字典类型列表 */
115   const getList = async () => {
116     loading.value = true
117     try {
118       const data = await DataSetApi.getDataSetPage(queryParams)
119       list.value = data.list
120       total.value = data.total
121     } finally {
122       loading.value = false
123     }
124   }
125
126   /** 搜索按钮操作 */
127   const handleQuery = () => {
128     queryParams.pageNo = 1
129     getList()
130   }
131
132   /** 重置按钮操作 */
133   const resetQuery = () => {
134     queryFormRef.value.resetFields()
135     handleQuery()
136   }
137
138   /** 添加/修改操作 */
139   const formRef = ref()
140   const openForm = (type: string, id?: number) => {
141     formRef.value.open(type, id)
142   }
143
144   /** 删除按钮操作 */
145   const handleDelete = async (id: number) => {
146     try {
147       // 删除的二次确认
148       await message.delConfirm()
149       // 发起删除
150       await DataSetApi.deleteDataSet(id)
151       message.success(t('common.delSuccess'))
152       // 刷新列表
153       await getList()
154     } catch {}
155   }
156
157   /** 初始化 **/
158   onMounted(() => {
159     getList()
160   })
161 </script>