|
|
@@ -3,38 +3,51 @@
|
|
|
<el-card shadow="never">
|
|
|
<div class="search">
|
|
|
<el-form inline>
|
|
|
- <el-form-item label="关键字">
|
|
|
- <el-input v-model="params.keyWord" style="width: 200px; margin-left: 20px" class="search-input" placeholder="请输入搜索关键字" @keyup.enter.native="getList(1)" clearable>
|
|
|
+ <!-- 关键字 -->
|
|
|
+ <el-form-item :label="$t('message.device.formI18nLabel.keyword')">
|
|
|
+ <!-- 请输入搜索关键字 -->
|
|
|
+ <el-input v-model="params.keyWord" style="width: 200px; margin-left: 20px" class="search-input" :placeholder="$t('message.configuration.designScreen.keywordPlaceholder')" @keyup.enter.native="getList(1)" clearable>
|
|
|
</el-input>
|
|
|
+ <!-- 查询 -->
|
|
|
<el-button type="primary" class="ml10" @click="getList(1)">
|
|
|
<el-icon>
|
|
|
<ele-Search />
|
|
|
</el-icon>
|
|
|
- 查询
|
|
|
+ {{ $t('message.formI18nButton.query') }}
|
|
|
</el-button>
|
|
|
</el-form-item>
|
|
|
<el-form-item>
|
|
|
+ <!-- 新增组态图 -->
|
|
|
<el-button type="primary" v-auth="'add'" @click="addOrEdit()">
|
|
|
<el-icon>
|
|
|
<ele-FolderAdd />
|
|
|
</el-icon>
|
|
|
- 新增组态图
|
|
|
+ {{ $t('message.configuration.designScreen.addConfigure') }}
|
|
|
</el-button>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
</div>
|
|
|
<el-table :data="tableData" style="width: 100%" row-key="id" v-loading="loading">
|
|
|
<!-- <el-table-column type="index" label="序号" width="60" align="center" /> -->
|
|
|
- <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="200" align="center">
|
|
|
+ <!-- ID -->
|
|
|
+ <el-table-column prop="id" :label="$t('message.tableI18nColumn.id')" width="100" show-overflow-tooltip></el-table-column>
|
|
|
+ <!-- 组态图名称 -->
|
|
|
+ <el-table-column prop="name" :label="$t('message.configuration.designScreen.configureName')" show-overflow-tooltip></el-table-column>
|
|
|
+ <!-- 创建时间 -->
|
|
|
+ <el-table-column prop="createdAt" :label="$t('message.tableI18nColumn.createdAt')" min-width="100" align="center"></el-table-column>
|
|
|
+ <!-- 更新时间 -->
|
|
|
+ <el-table-column prop="updatedAt" :label="$t('message.tableI18nColumn.updatedAt')" min-width="100" align="center"></el-table-column>
|
|
|
+ <!-- 操作 -->
|
|
|
+ <el-table-column :label="$t('message.tableI18nColumn.operation')" :width="currentLocale === 'en' ? 300 : 200" 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="warning" v-auth="'edit'" @click="addOrEdit(scope.row)">编辑</el-button>
|
|
|
- <el-button size="small" text type="warning" @click="edit(scope.row)">编辑组态图</el-button>
|
|
|
- <el-button size="small" text type="info" v-auth="'del'" @click="del(scope.row)">删除</el-button>
|
|
|
+ <!-- 预览 -->
|
|
|
+ <el-button size="small" text type="primary" v-if="!scope.row.folderName" @click="view(scope.row)">{{ $t('message.configuration.designScreen.previewBtn') }}</el-button>
|
|
|
+ <!-- 编辑 -->
|
|
|
+ <el-button size="small" text type="warning" v-auth="'edit'" @click="addOrEdit(scope.row)">{{ $t('message.tableI18nAction.edit') }}</el-button>
|
|
|
+ <!-- 编辑组态图 -->
|
|
|
+ <el-button size="small" text type="warning" @click="edit(scope.row)">{{$t('message.configuration.designScreen.editConfigure')}}</el-button>
|
|
|
+ <!-- 删除 -->
|
|
|
+ <el-button size="small" text type="info" v-auth="'del'" @click="del(scope.row)">{{ $t('message.tableI18nAction.delete') }}</el-button>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
@@ -45,12 +58,16 @@
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
+import { ref, computed } from 'vue';
|
|
|
import api from '/@/api/configuration';
|
|
|
import { useSearch } from '/@/hooks/useCommon';
|
|
|
import { ElMessageBox, ElMessage } from 'element-plus';
|
|
|
-import getOrigin from '/@/utils/origin'
|
|
|
import EditForm from './edit.vue';
|
|
|
-import { ref } from 'vue';
|
|
|
+import { useI18n } from 'vue-i18n';
|
|
|
+// 国际化
|
|
|
+const { locale, t } = useI18n();
|
|
|
+
|
|
|
+const currentLocale = computed(() => locale.value);
|
|
|
|
|
|
const editFormRef = ref();
|
|
|
|
|
|
@@ -85,13 +102,15 @@ const edit = (row: any) => {
|
|
|
};
|
|
|
|
|
|
const del = (row: any) => {
|
|
|
- ElMessageBox.confirm(`此操作将删除图形：“${row.name}”，是否继续?`, '提示', {
|
|
|
- confirmButtonText: '确认',
|
|
|
- cancelButtonText: '取消',
|
|
|
+ ElMessageBox.confirm(
|
|
|
+ t('message.configuration.designScreen.deleteDiagramMessage', { name: row.name }),
|
|
|
+ t('message.tableI18nConfirm.deleteTitle'), {
|
|
|
+ confirmButtonText: t('message.tableI18nConfirm.confirmText'),
|
|
|
+ cancelButtonText: t('message.tableI18nConfirm.cancelText'),
|
|
|
type: 'warning',
|
|
|
}).then(async () => {
|
|
|
await api.del(row.id);
|
|
|
- ElMessage.success('删除成功');
|
|
|
+ ElMessage.success(t('message.tableI18nConfirm.deleteSuccess'));
|
|
|
getList(1);
|
|
|
});
|
|
|
};
|
