工业互联网平台前端 vue3版本
查看 | 历史 | 提交 | 提交对比
潘志宝
2024-10-10 9e6ba7e2c0b11cdcc98a5e7833b22800d84211ad
提交 | 用户 | 时间
c62768 1 <template>
J 2   <!-- 搜索工作栏 -->
3   <ContentWrap>
4     <el-form ref="queryFormRef" :inline="true" :model="queryParams" class="-mb-15px"
5              label-width="68px">
6       <el-form-item label="指标编码" prop="name">
7         <el-input v-model="queryParams.itemNo" class="!w-240px" clearable placeholder="请输入指标编码"
8                   @keyup.enter="handleQuery"/>
9       </el-form-item>
10       <el-form-item label="指标名称" prop="name">
11         <el-input v-model="queryParams.itemName" class="!w-240px" clearable placeholder="请输入指标名称"
12                   @keyup.enter="handleQuery"/>
13       </el-form-item>
14       <el-form-item>
15         <el-button @click="handleQuery">
16           <Icon class="mr-5px" icon="ep:search"/>
17           搜索
18         </el-button>
19         <el-button @click="resetQuery">
20           <Icon class="mr-5px" icon="ep:refresh"/>
21           重置
22         </el-button>
23         <el-button
24           v-hasPermi="['data:ind-item:create']"
25           plain
26           type="primary"
27           @click="openForm('create')"
28         >
29           <Icon class="mr-5px" icon="ep:plus"/>
30           新增
31         </el-button>
32       </el-form-item>
33     </el-form>
34   </ContentWrap>
35
36   <!-- 列表 -->
37   <ContentWrap>
38     <el-table v-loading="loading" :data="list">
39       <el-table-column prop="itemNo" label="指标编码" header-align="center" align="center" min-width="80"/>
40       <el-table-column prop="itemName" label="指标名称" header-align="center" align="center" min-width="120"/>
41       <el-table-column prop="itemCategoryName" label="指标分类" header-align="center" align="center" min-width="100"/>
42       <el-table-column prop="itemType" label="指标类型" header-align="center" align="center" min-width="60">
43         <template #default="scope">
d3ee81 44           <dict-tag :type="DICT_TYPE.IND_ITEM_TYPE" :value="scope.row.itemType" />
c62768 45         </template>
J 46       </el-table-column>
47       <el-table-column prop="coefficient" label="系数" header-align="center" align="center" min-width="60"/>
48       <el-table-column prop="precision" label="指标精度" header-align="center" align="center" min-width="60"/>
49       <el-table-column prop="timeGranularity" label="时间粒度" header-align="center" align="center" min-width="40">
50         <template #default="scope">
51           <dict-tag :type="DICT_TYPE.TIME_GRANULARITY" :value="scope.row.timeGranularity" />
52         </template>
53       </el-table-column>
54       <el-table-column
55         :formatter="dateFormatter"
56         align="center"
57         label="创建时间"
58         prop="createTime"
59         width="180"/>
60       <el-table-column align="center" label="操作">
61         <template #default="scope">
62           <el-button
63             v-hasPermi="['data:ind-item:update']"
64             link
65             type="primary"
66             @click="openForm('update', scope.row)">
67             修改
68           </el-button>
69           <el-button
70             v-hasPermi="['data:ind-item:delete']"
71             link
72             type="danger"
73             @click="handleDelete(scope.row.id)">
74             删除
75           </el-button>
76         </template>
77       </el-table-column>
78     </el-table>
79     <!-- 分页 -->
80     <Pagination
81       v-model:limit="queryParams.pageSize"
82       v-model:page="queryParams.pageNo"
83       :total="total"
84       @pagination="getList"
85     />
86   </ContentWrap>
87
88   <!-- 表单弹窗：添加/修改 -->
89   <AtomIndDefineForm ref="atomFormRef" @success="getList" />
90   <DerIndDefineForm ref="derFormRef" @success="getList" />
91   <CalIndDefineForm ref="calFormRef" @success="getList" />
92   <SelectItemType ref="itemTypeSel"/>
93 </template>
94
95 <script lang="ts" setup>
96   import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
97   import { dateFormatter } from '@/utils/formatTime'
98   import * as DataSetApi from '@/api/data/ind/data/data.set'
99   import AtomIndDefineForm from './AtomIndDefineForm.vue'
100   import DerIndDefineForm from './DerIndDefineForm.vue'
101   import CalIndDefineForm from './CalIndDefineForm.vue'
102   import SelectItemType from './selectItemType.vue'
103   import download from '@/utils/download'
104   import * as ItemApi from '@/api/data/ind/item/item'
105   import * as CategoryApi from "@/api/data/ind/category";
106
9e6ba7 107   defineOptions({ name: 'IndItem' })
c62768 108
J 109   const message = useMessage() // 消息弹窗
110   const { t } = useI18n() // 国际化
111   const dataCategoryList = ref([] as CategoryApi.IndItemCategoryVO[])
112   const loading = ref(true) // 列表的加载中
113   const total = ref(0) // 列表的总页数
114   const list = ref([]) // 字典表格数据
115   const queryParams = reactive({
116     pageNo: 1,
117     pageSize: 10,
118     itemNo: '',
119     itemName: '',
120     itemType: '',
121     itemCategory: ''
122   })
123   const queryFormRef = ref() // 搜索的表单
124   const exportLoading = ref(false) // 导出的加载中
125
126   /** 查询字典类型列表 */
127   const getList = async () => {
128     loading.value = true
129     try {
130       const data = await ItemApi.getItemPage(queryParams)
131       list.value = data.list
132       total.value = data.total
133       dataCategoryList.value = await CategoryApi.getCategoryListAllSimple()
134     } finally {
135       loading.value = false
136     }
137   }
138
139   /** 搜索按钮操作 */
140   const handleQuery = () => {
141     queryParams.pageNo = 1
142     getList()
143   }
144
145   /** 重置按钮操作 */
146   const resetQuery = () => {
147     queryFormRef.value.resetFields()
148     handleQuery()
149   }
150
151   /** 添加/修改操作 */
152   const atomFormRef = ref()
153   const derFormRef = ref()
154   const calFormRef = ref()
155   const itemTypeSel = ref()
156
157   const openForm = (type: string, row) => {
158     if(row !== null && row !==undefined){
159       if(row.itemType === 'ATOM'){
160         if (row.id){
161           atomFormRef.value.open(type,row.id)
162         }
163       }else if(row.itemType === 'CAL'){
164         if (row.id){
165           calFormRef.value.open(type,row.id)
166         }
167       }else if(row.itemType === 'DER'){
168         if (row.id){
169           derFormRef.value.open(type,row.id)
170         }
171       }
172     }else {
173       itemTypeSel.value.open(type)
174     }
175
176   }
177
178   /** 删除按钮操作 */
179   const handleDelete = async (id: number) => {
180     try {
181       // 删除的二次确认
182       await message.delConfirm()
183       // 发起删除
184       await ItemApi.deleteItem(id)
185       message.success(t('common.delSuccess'))
186       // 刷新列表
187       await getList()
188     } catch {}
189   }
190
191   /** 初始化 **/
192   onMounted(() => {
193     getList()
194   })
195 </script>