潘志宝
2025-02-28 b48f2db5147b301e64213600391176b205baef94
提交 | 用户 | 时间
e26cd3 1 <template>
b48f2d 2   <!-- 搜索 -->
3   <ContentWrap>
4     <el-form
5       class="-mb-15px"
6       :model="queryParams"
7       ref="queryFormRef"
8       :inline="true"
9       label-width="68px"
10     >
11       <el-form-item label="名称" prop="name">
12         <el-input
13           v-model="queryParams.name"
14           placeholder="请输入名称"
15           clearable
16           @keyup.enter="handleQuery"
17           class="!w-240px"
e26cd3 18         />
b48f2d 19       </el-form-item>
20       <el-form-item>
21         <el-button @click="handleQuery">
22           <Icon icon="ep:search" class="mr-5px"/>
23           搜索
24         </el-button>
25         <el-button @click="resetQuery">
26           <Icon icon="ep:refresh" class="mr-5px"/>
27           重置
28         </el-button>
29         <el-button
30           type="primary"
31           plain
32           @click="openForm('create')"
33           v-hasPermi="['data:arc:create']"
34         >
35           <Icon icon="ep:plus" class="mr-5px"/>
36           新增
37         </el-button>
38       </el-form-item>
39     </el-form>
40   </ContentWrap>
e26cd3 41
b48f2d 42   <!-- 列表 -->
43   <ContentWrap>
44     <el-table v-loading="loading" :data="list">
45       <el-table-column label="编码" align="center" prop="code"/>
46       <el-table-column label="名称" align="center" prop="name"/>
47       <el-table-column label="归档周期" align="center" prop="type"/>
48       <el-table-column label="归档点位" align="center" prop="point"/>
49       <el-table-column label="计算方法" align="center" prop="calculate"/>
50       <el-table-column label="是否启用" align="center" prop="isEnable">
51         <template #default="scope">
52           <el-tag v-if="scope.row.isEnable === 1" size="small">是</el-tag>
53           <el-tag v-else size="small" type="danger">否</el-tag>
54         </template>
55       </el-table-column>
56       <el-table-column label="操作" align="center" min-width="110" fixed="right">
57         <template #default="scope">
58           <el-button
59             link
60             type="primary"
61             @click="openForm('update', scope.row.id)"
62             v-hasPermi="['data:arc:update']"
63           >
64             编辑
65           </el-button>
66           <el-button
67             link
68             type="primary"
69             @click="openArcData(scope.row.id)"
70           >
71             历史值
72           </el-button>
73           <el-button
74             link
75             type="danger"
76             @click="handleDelete(scope.row.id)"
77             v-hasPermi="['data:arc:delete']"
78           >
79             删除
80           </el-button>
81         </template>
82       </el-table-column>
83     </el-table>
84     <!-- 分页 -->
85     <Pagination
86       :total="total"
87       v-model:page="queryParams.pageNo"
88       v-model:limit="queryParams.pageSize"
89       @pagination="getList"
90     />
91   </ContentWrap>
e26cd3 92
b48f2d 93   <!-- 表单弹窗:添加/修改 -->
94   <ArcSettingForm ref="formRef" @success="getList"/>
95
96   <!-- 历史值弹窗 -->
97   <ArcData ref="dataRef"/>
e26cd3 98
D 99 </template>
100 <script lang="ts" setup>
b48f2d 101 import * as ArcSetting from '@/api/data/arc/index'
102 import ArcSettingForm from './ArcSettingForm.vue'
103 import ArcData from './ArcData.vue'
e26cd3 104
b48f2d 105 defineOptions({name: 'DataArc'})
e26cd3 106
b48f2d 107 const message = useMessage() // 消息弹窗
108 const {t} = useI18n() // 国际化
e26cd3 109
b48f2d 110 const loading = ref(true) // 列表的加载中
111 const total = ref(0) // 列表的总页数
112 const list = ref([]) // 列表的数据
113 const queryParams = reactive({
114   pageNo: 1,
115   pageSize: 10,
116   name: undefined,
117   type: undefined
118 })
119 const queryFormRef = ref() // 搜索的表单
120 const exportLoading = ref(false) // 导出的加载中
e26cd3 121
b48f2d 122 /** 查询列表 */
123 const getList = async () => {
124   loading.value = true
125   try {
126     const page = await ArcSetting.getArcSettingPage(queryParams)
127     list.value = page.list
128     total.value = page.total
129   } finally {
130     loading.value = false
131   }
132 }
e26cd3 133
b48f2d 134 /** 搜索按钮操作 */
135 const handleQuery = () => {
136   queryParams.pageNo = 1
137   getList()
138 }
e26cd3 139
b48f2d 140 /** 重置按钮操作 */
141 const resetQuery = () => {
142   queryFormRef.value.resetFields()
143   handleQuery()
144 }
e26cd3 145
b48f2d 146 /** 添加/修改操作 */
147 const formRef = ref()
148 const openForm = (type: string, id?: number) => {
149   formRef.value.open(type, id)
150 }
e26cd3 151
b48f2d 152 /** 历史操作 */
153 const dataRef = ref()
154 const openArcData = (id?: string) => {
155   dataRef.value.open(id)
156 }
e26cd3 157
b48f2d 158 /** 删除按钮操作 */
159 const handleDelete = async (id: number) => {
160   try {
161     // 删除的二次确认
162     await message.delConfirm()
163     // 发起删除
164     await ArcSetting.deleteArcSetting(id)
165     message.success(t('common.delSuccess'))
166     // 刷新列表
167     await getList()
168   } catch {
169   }
170 }
e26cd3 171
b48f2d 172 /** 初始化 **/
173 onMounted(async () => {
174   await getList()
175 })
e26cd3 176 </script>