|
|
@@ -1,9 +1,137 @@
|
|
|
<template>
|
|
|
- <div class="tab-content">
|
|
|
- 组态应用
|
|
|
+ <div class="tab-content h-full">
|
|
|
+ <div class="subtitle"><span></span> <el-button type="primary" size="small" @click="addDevice()">添加组态</el-button></div>
|
|
|
+ <el-table :data="tableData" style="width: 100%" v-loading="loading" max-height="calc(100vh - 280px)">
|
|
|
+ <el-table-column prop="id" label="ID" width="100" show-overflow-tooltip></el-table-column>
|
|
|
+ <el-table-column prop="name" label="组态图名称" show-overflow-tooltip></el-table-column>
|
|
|
+ <el-table-column prop="createdAt" label="创建时间" min-width="100" align="center"></el-table-column>
|
|
|
+ <el-table-column prop="updatedAt" label="更新时间" min-width="100" align="center"></el-table-column>
|
|
|
+ <el-table-column label="操作" width="170" align="center">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-button size="small" text type="primary" v-if="!scope.row.folderName" @click="view(scope.row)">预览</el-button>
|
|
|
+ <el-button size="small" text type="primary" @click="edit(scope.row)">编辑组态图</el-button>
|
|
|
+ <el-button size="small" text type="warning" v-auth="'xxx'" @click="onDel(scope.row)">解绑</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <pagination v-if="params.total" :total="params.total" v-model:page="params.pageNum" v-model:limit="params.pageSize" @pagination="getList()" />
|
|
|
+ <el-dialog title="添加组态" v-model="isShowDialog" width="400">
|
|
|
+ <el-form v-if="isShowDialog">
|
|
|
+ <el-form-item label="组态" style="margin-bottom: 0;">
|
|
|
+ <el-select v-model="form.resourcesKey" filterable placeholder="选择组态" :clearable="false" style="width: 100%">
|
|
|
+ <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <template #footer>
|
|
|
+ <span class="dialog-footer">
|
|
|
+ <el-button @click="onCancel">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="onSubmit">确 定</el-button>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
+import { reactive, ref } from 'vue';
|
|
|
+import topoApi from '/@/api/configuration';
|
|
|
+import api from '/@/api/projects';
|
|
|
+import { useSearch } from '/@/hooks/useCommon';
|
|
|
+import { useRoute } from 'vue-router';
|
|
|
+import { ElMessage, ElMessageBox } from 'element-plus';
|
|
|
+import getOrigin from '/@/utils/origin'
|
|
|
+const route = useRoute();
|
|
|
+
|
|
|
+const props = defineProps({ resourcesTypes: Number })
|
|
|
+const isShowDialog = ref(false)
|
|
|
+const options = ref<any[]>([])
|
|
|
+const resourcesTypes = props.resourcesTypes
|
|
|
+const projectsCode = route.params.id
|
|
|
+
|
|
|
+const baseForm = {
|
|
|
+ resourcesKey: '',
|
|
|
+ projectsCode,
|
|
|
+ resourcesTypes
|
|
|
+}
|
|
|
+
|
|
|
+const form = reactive({
|
|
|
+ ...baseForm
|
|
|
+})
|
|
|
+
|
|
|
+const { params, tableData, getList, loading } = useSearch<any[]>(topoApi.getList, 'data', { ids: [], status: -1 });
|
|
|
+
|
|
|
+getOptions();
|
|
|
+getSourceList();
|
|
|
+
|
|
|
+function getSourceList() {
|
|
|
+ api.getProjectResourcesByCode({ projectsCode }).then((res: any) => {
|
|
|
+ params.ids = (res || []).filter((item: any) => item.resourcesTypes === resourcesTypes).map((item: any) => item.resourcesKey)
|
|
|
+
|
|
|
+ getList();
|
|
|
+ // if (!params.ids.length) {
|
|
|
+ // params.pageNum = 1
|
|
|
+ // tableData.value = []
|
|
|
+ // } else {
|
|
|
+ // getList();
|
|
|
+ // }
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+function getOptions() {
|
|
|
+ topoApi.getList({ status: -1, pageNum: 1, pageSize: 500 }).then((res: any) => {
|
|
|
+ options.value = (res?.data || []).map((item: any) => ({ label: item.name, value: item.id }))
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+function onCancel() {
|
|
|
+ Object.assign(form, baseForm)
|
|
|
+ isShowDialog.value = false
|
|
|
+}
|
|
|
+
|
|
|
+function onSubmit() {
|
|
|
+ if (!form.resourcesKey) return ElMessage('请先选择组态')
|
|
|
+ api.bindResources(form).then((res: any) => {
|
|
|
+ onCancel()
|
|
|
+ getSourceList()
|
|
|
+ ElMessage.success('添加成功')
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+function addDevice() {
|
|
|
+ isShowDialog.value = true
|
|
|
+}
|
|
|
+
|
|
|
+function getTokenUrl(url: string) {
|
|
|
+ const tokenUrl = import.meta.env.VITE_TOPO_URL
|
|
|
+ return getOrigin(tokenUrl + url)
|
|
|
+}
|
|
|
+
|
|
|
+const view = (row: any) => {
|
|
|
+ const url = getTokenUrl('#/show/' + row.id);
|
|
|
+ window.open(url);
|
|
|
+};
|
|
|
+
|
|
|
+const edit = (row: any) => {
|
|
|
+ const url = getTokenUrl('#/editor/' + row.id);
|
|
|
+ window.open(url);
|
|
|
+};
|
|
|
+
|
|
|
+function onDel(row: any) {
|
|
|
+ ElMessageBox.confirm(`确定要解绑该组态？`, '提示', {
|
|
|
+ confirmButtonText: '确认',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning',
|
|
|
+ }).then(() => {
|
|
|
+ api.unbindResources({
|
|
|
+ projectsCode,
|
|
|
+ resourcesTypes,
|
|
|
+ resourcesKey: row.id
|
|
|
+ }).then(() => {
|
|
|
+ getSourceList()
|
|
|
+ ElMessage.success('解绑成功')
|
|
|
+ })
|
|
|
+ });
|
|
|
+}
|
|
|
|
|
|
</script>
|
