工业互联网平台前端 vue3版本
查看 | 历史 | 提交 | 提交对比
dengzedong
2024-11-28 5c475d3ac8ee98713e0f0962dd9464daccfb9eb1
提交 | 用户 | 时间
2f0aa4 1 <template>
潘 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="code">
12         <el-input
13           v-model="queryParams.code"
14           placeholder="请输入方案编号"
15           clearable
16           @keyup.enter="handleQuery"
17           class="!w-240px"
18         />
19       </el-form-item>
20       <el-form-item label="方案名称" prop="name">
21         <el-input
22           v-model="queryParams.name"
23           placeholder="请输入方案名称"
24           clearable
25           @keyup.enter="handleQuery"
26           class="!w-240px"
27         />
28       </el-form-item>
29       <el-form-item>
30         <el-button @click="handleQuery">
31           <Icon icon="ep:search" class="mr-5px" />
32           搜索
33         </el-button>
34         <el-button @click="resetQuery">
35           <Icon icon="ep:refresh" class="mr-5px" />
36           重置
37         </el-button>
38         <el-button
39           type="primary"
40           plain
41           @click="openForm('create')"
42           v-hasPermi="['sche:scheme:create']"
43         >
44           <Icon icon="ep:plus" class="mr-5px" />
45           新增
46         </el-button>
47       </el-form-item>
48     </el-form>
49   </ContentWrap>
50
51   <!-- 列表 -->
52   <ContentWrap>
53     <el-table v-loading="loading" :data="list">
6badb7 54       <el-table-column label="方案编号" align="center" prop="code" min-width="100"/>
潘 55       <el-table-column label="方案名称" align="center" prop="name" min-width="100"/>
56       <el-table-column label="触发方式" align="center" prop="triggerMethod" min-width="100">
57         <template #default="scope">
58           <dict-tag :type="DICT_TYPE.SCHE_TRIGGER_METHOD" :value="scope.row.triggerMethod" />
59         </template>
60       </el-table-column>
61       <el-table-column label="触发条件" align="center" prop="triggerCondition" min-width="100"/>
62       <el-table-column label="调整对象" align="center" prop="scheduleObj" min-width="100"/>
63       <el-table-column label="调整类型" align="center" prop="scheduleType" min-width="100"/>
64       <el-table-column label=" 调整策略" align="center" prop="scheduleStrategy" min-width="100"/>
65       <el-table-column label="调度时间" align="center" prop="scheduleTime" min-width="160" />
66       <el-table-column label="备注" align="center" prop="remark" min-width="100" />
67       <el-table-column label="状态" align="center" prop="status" min-width="100">
68         <template #default="scope">
69           <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
70         </template>
71       </el-table-column>
2f0aa4 72       <el-table-column label="操作" align="center" min-width="110" fixed="right">
潘 73         <template #default="scope">
74           <el-button
75             link
76             type="primary"
77             @click="openForm('update', scope.row.id)"
78             v-hasPermi="['sche:scheme:update']"
79           >
80             编辑
81           </el-button>
82           <el-button
83             link
84             type="danger"
85             @click="handleDelete(scope.row.id)"
86             v-hasPermi="['sche:scheme:delete']"
87           >
88             删除
89           </el-button>
90         </template>
91       </el-table-column>
92     </el-table>
93     <!-- 分页 -->
94     <Pagination
95       :total="total"
96       v-model:page="queryParams.pageNo"
97       v-model:limit="queryParams.pageSize"
98       @pagination="getList"
99     />
100   </ContentWrap>
101
102   <!-- 表单弹窗：添加/修改 -->
103   <ScheduleSchemeForm ref="formRef" @success="getList" />
104
105 </template>
106 <script lang="ts" setup>
107   import {DICT_TYPE, getIntDictOptions} from '@/utils/dict'
108   import {dateFormatter} from '@/utils/formatTime'
109   import download from '@/utils/download'
110   import * as ScheduleSchemeApi from '@/api/model/sche/scheme'
111   import ScheduleSchemeForm from './ScheduleSchemeForm.vue'
112
113   defineOptions({name: 'ScheduleScheme'})
114
115   const message = useMessage() // 消息弹窗
116   const {t} = useI18n() // 国际化
117
118   const loading = ref(true) // 列表的加载中
119   const total = ref(0) // 列表的总页数
120   const list = ref([]) // 列表的数据
121   const queryParams = reactive({
122     pageNo: 1,
123     pageSize: 10,
124     code: undefined,
125     name: undefined
126   })
127   const queryFormRef = ref() // 搜索的表单
128   const exportLoading = ref(false) // 导出的加载中
129
130   /** 查询列表 */
131   const getList = async () => {
132     loading.value = true
133     try {
134       const page = await ScheduleSchemeApi.getScheduleSchemePage(queryParams)
135       list.value = page.list
136       total.value = page.total
137     } finally {
138       loading.value = false
139     }
140   }
141
142   /** 搜索按钮操作 */
143   const handleQuery = () => {
144     queryParams.pageNo = 1
145     getList()
146   }
147
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 ScheduleSchemeApi.deleteScheduleScheme(id)
167       message.success(t('common.delSuccess'))
168       // 刷新列表
169       await getList()
170     } catch {
171     }
172   }
173
174   /** 初始化 **/
175   onMounted(async () => {
176     await getList()
177   })
178 </script>