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