|
|
@@ -1,50 +1,63 @@
|
|
|
<template>
|
|
|
- <el-dialog class="api-edit" v-model="showDialog" :title="`${formData.id ? '编辑资产关系' : '新增资产关系'}`" width="800px" :close-on-click-modal="false" :close-on-press-escape="false">
|
|
|
+ <el-dialog class="api-edit" v-model="showDialog" :title="$t(formData.id ? 'message.property.relationship.dialog.editTitle' : 'message.property.relationship.dialog.addTitle')" width="800px" :close-on-click-modal="false" :close-on-press-escape="false">
|
|
|
<div class="dialog-wrapper" v-if="showDialog">
|
|
|
<el-form class="inline-form" ref="formRef" :model="formData" :rules="ruleForm" label-width="auto">
|
|
|
- <el-form-item label="选择角色" prop="roleId">
|
|
|
- <el-cascader :options="roleData" :props="{
|
|
|
- checkStrictly: true, multiple: false, emitPath: false, value: 'id', label: 'name'
|
|
|
- }" placeholder="请选择角色" clearable class="w100" disabled v-model="formData.roleId">
|
|
|
+ <el-form-item :label="$t('message.property.relationship.form.chooseRole')" prop="roleId">
|
|
|
+ <el-cascader
|
|
|
+ :options="roleData"
|
|
|
+ :props="{
|
|
|
+ checkStrictly: true,
|
|
|
+ multiple: false,
|
|
|
+ emitPath: false,
|
|
|
+ value: 'id',
|
|
|
+ label: 'name',
|
|
|
+ }"
|
|
|
+ :placeholder="$t('message.property.relationship.form.chooseRolePlaceholder')"
|
|
|
+ clearable
|
|
|
+ class="w100"
|
|
|
+ disabled
|
|
|
+ v-model="formData.roleId"
|
|
|
+ >
|
|
|
<template #default="{ node, data }">
|
|
|
<span>{{ data.name }}</span>
|
|
|
<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
|
|
|
</template>
|
|
|
</el-cascader>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="已选设备" prop="deviceKeys">
|
|
|
- <el-tag v-for="name in assetName" class="mr-2">{{ name }} </el-tag>
|
|
|
+ <el-form-item :label="$t('message.property.relationship.form.selectedDevices')" prop="deviceKeys">
|
|
|
+ <el-tag v-for="name in assetName" :key="name" class="mr-2">{{ name }} </el-tag>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
<el-table :data="tableData" style="width: 100%" row-key="id" @selection-change="handleSelectionChange" v-loading="loading">
|
|
|
<el-table-column type="selection" reserve-selection width="55" align="center" />
|
|
|
- <el-table-column prop="deviceName" label="设备名称" min-width="100" show-overflow-tooltip></el-table-column>
|
|
|
- <el-table-column prop="deviceKey" label="设备KEY" show-overflow-tooltip></el-table-column>
|
|
|
- <el-table-column prop="deviceNumber" label="设备编码" show-overflow-tooltip></el-table-column>
|
|
|
- <el-table-column prop="deviceCategory" label="设备类型" show-overflow-tooltip></el-table-column>
|
|
|
- <el-table-column prop="installTime" label="安装时间" width="160" align="center"></el-table-column>
|
|
|
+ <el-table-column prop="deviceName" :label="$t('message.property.relationship.columns.deviceName')" min-width="100" show-overflow-tooltip></el-table-column>
|
|
|
+ <el-table-column prop="deviceKey" :label="$t('message.property.relationship.columns.deviceKey')" show-overflow-tooltip></el-table-column>
|
|
|
+ <el-table-column prop="deviceNumber" :label="$t('message.property.relationship.columns.deviceNumber')" show-overflow-tooltip></el-table-column>
|
|
|
+ <el-table-column prop="deviceCategory" :label="$t('message.property.relationship.columns.deviceCategory')" show-overflow-tooltip></el-table-column>
|
|
|
+ <el-table-column prop="installTime" :label="$t('message.property.relationship.columns.installTime')" width="160" align="center"></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()" />
|
|
|
</div>
|
|
|
<template #footer>
|
|
|
<div class="dialog-footer">
|
|
|
- <el-button @click="showDialog = false">取消</el-button>
|
|
|
- <el-button type="primary" @click="onSubmit">确定</el-button>
|
|
|
+ <el-button @click="showDialog = false">{{ $t("message.property.relationship.messages.cancel") }}</el-button>
|
|
|
+ <el-button type="primary" @click="onSubmit">{{ $t("message.property.relationship.messages.confirm") }}</el-button>
|
|
|
</div>
|
|
|
</template>
|
|
|
</el-dialog>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
-import { ref, reactive, nextTick } from 'vue';
|
|
|
-import api from '/@/api/device'
|
|
|
-import system from '/@/api/system';
|
|
|
-import { useSearch } from '/@/hooks/useCommon'
|
|
|
-import { ruleRequired } from '/@/utils/validator';
|
|
|
-import { ElMessage } from 'element-plus';
|
|
|
-import { deepClone } from '/@/utils/other';
|
|
|
+import { ref, reactive, computed } from "vue";
|
|
|
+import { useI18n } from "vue-i18n";
|
|
|
+import api from "/@/api/device";
|
|
|
+import system from "/@/api/system";
|
|
|
+import { useSearch } from "/@/hooks/useCommon";
|
|
|
+import { ruleRequired } from "/@/utils/validator";
|
|
|
+import { ElMessage } from "element-plus";
|
|
|
+import { deepClone } from "/@/utils/other";
|
|
|
|
|
|
-const emit = defineEmits(['getList']);
|
|
|
+const emit = defineEmits(["getList"]);
|
|
|
|
|
|
const showDialog = ref(false);
|
|
|
const formRef = ref();
|
|
|
@@ -52,19 +65,23 @@ const roleData = ref([]);
|
|
|
const assetName = ref<string[]>([]);
|
|
|
const baseForm = {
|
|
|
id: undefined,
|
|
|
- roleId: '',
|
|
|
+ roleId: "",
|
|
|
deviceKeys: [],
|
|
|
};
|
|
|
|
|
|
const formData = reactive<any>(deepClone(baseForm));
|
|
|
|
|
|
-const ruleForm = {
|
|
|
- roleId: [ruleRequired('角色不能为空')],
|
|
|
- deviceKeys: [ruleRequired('设备不能为空')],
|
|
|
-};
|
|
|
+const { t } = useI18n();
|
|
|
+
|
|
|
+const ruleForm = computed(() => {
|
|
|
+ return {
|
|
|
+ roleId: [ruleRequired(t("message.property.relationship.valid.roleRequired"))],
|
|
|
+ deviceKeys: [ruleRequired(t("message.property.relationship.valid.deviceRequired"))],
|
|
|
+ };
|
|
|
+});
|
|
|
|
|
|
-const { params, tableData, getList, loading } = useSearch<any[]>(api.dev_asset.getList, 'Data', { pageSize: 10 })
|
|
|
-getList()
|
|
|
+const { params, tableData, getList, loading } = useSearch<any[]>(api.dev_asset.getList, "Data", { pageSize: 10 });
|
|
|
+getList();
|
|
|
|
|
|
const handleSelectionChange = (selection: any[]) => {
|
|
|
formData.deviceKeys = selection.map((item) => item.deviceKey);
|
|
|
@@ -74,15 +91,15 @@ const handleSelectionChange = (selection: any[]) => {
|
|
|
const onSubmit = async () => {
|
|
|
await formRef.value.validate();
|
|
|
await api.assetRelationship.bind(formData);
|
|
|
- ElMessage.success('操作成功');
|
|
|
+ ElMessage.success(t("message.property.relationship.messages.saveSuccess"));
|
|
|
resetForm();
|
|
|
showDialog.value = false;
|
|
|
- emit('getList');
|
|
|
+ emit("getList");
|
|
|
};
|
|
|
|
|
|
const resetForm = async () => {
|
|
|
Object.assign(formData, deepClone(baseForm));
|
|
|
- assetName.value = []
|
|
|
+ assetName.value = [];
|
|
|
formRef.value && formRef.value.resetFields();
|
|
|
};
|
|
|
|
|
|
@@ -93,7 +110,7 @@ const open = async (roleId: string) => {
|
|
|
//获取所有的角色
|
|
|
system.role.getList({ status: 1 }).then((resp: any) => {
|
|
|
roleData.value = resp;
|
|
|
- })
|
|
|
+ });
|
|
|
};
|
|
|
|
|
|
defineExpose({ open });
|
|
|
@@ -102,4 +119,4 @@ defineExpose({ open });
|
|
|
.demo-form-inline .el-input {
|
|
|
--el-input-width: 320px;
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|
