|
|
@@ -1,85 +1,116 @@
|
|
|
<template>
|
|
|
<div class="system-edit-dic-container">
|
|
|
- <el-dialog :title="(ruleForm.id !== 0 ? '修改' : '添加') + '设备'" v-model="isShowDialog" width="769px">
|
|
|
- <el-form v-loading="loading" :model="ruleForm" ref="formRef" :rules="rules" label-width="110px">
|
|
|
- <el-form-item label="设备标识" prop="key">
|
|
|
- <el-input v-model="ruleForm.key" placeholder="请输入设备标识" :disabled="ruleForm.id" />
|
|
|
+ <!-- 编辑设备/新增设备 -->
|
|
|
+ <el-dialog :title="ruleForm.id !== 0 ? $t('message.device.dialogI18n.editDevice') : $t('message.device.dialogI18n.addDevice')" v-model="isShowDialog" width="769px">
|
|
|
+ <el-form v-loading="loading" :model="ruleForm" ref="formRef" :rules="rules" :label-width="currentLocale === 'en' ? '145px' : '110px'">
|
|
|
+ <!-- 设备标识 -->
|
|
|
+ <el-form-item :label="$t('message.device.formI18nLabel.deviceKey')" prop="key">
|
|
|
+ <!-- 请输入设备标识 -->
|
|
|
+ <el-input v-model="ruleForm.key" :placeholder="$t('message.device.formI18nPlaceholder.deviceKey')" :disabled="ruleForm.id" />
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="设备名称" prop="name">
|
|
|
- <el-input v-model="ruleForm.name" placeholder="请输入设备名称" />
|
|
|
+ <!-- 设备名称 -->
|
|
|
+ <el-form-item :label="$t('message.device.formI18nLabel.deviceName')" prop="name">
|
|
|
+ <!-- 请输入设备名称 -->
|
|
|
+ <el-input v-model="ruleForm.name" :placeholder="$t('message.device.formI18nPlaceholder.deviceName')" />
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="所属产品" prop="productKey">
|
|
|
- <el-select v-model="ruleForm.productKey" @change="productKeyChange" :disabled="ruleForm.id" placeholder="请选择所属产品" class="w100">
|
|
|
+ <!-- 所属产品 -->
|
|
|
+ <el-form-item :label="$t('message.device.formI18nLabel.productBind')" prop="productKey">
|
|
|
+ <!-- 请选择所属产品 -->
|
|
|
+ <el-select v-model="ruleForm.productKey" @change="productKeyChange" :disabled="ruleForm.id" :placeholder="$t('message.device.formI18nPlaceholder.productBind1')" class="w100">
|
|
|
<el-option v-for="item in productData" :key="item.id" :label="item.name" :value="item.key" />
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="设备坐标" prop="lng">
|
|
|
- <el-input :value="ruleForm.lng ? (ruleForm.lng + ' , ' + ruleForm.lat) : ''" placeholder="选择设备坐标" @click="selectMap(ruleForm)" read-only />
|
|
|
+ <!-- 设备坐标 -->
|
|
|
+ <el-form-item :label="$t('message.device.formI18nLabel.deviceLng')" prop="lng">
|
|
|
+ <!-- 选择设备坐标 -->
|
|
|
+ <el-input :value="ruleForm.lng ? (ruleForm.lng + ' , ' + ruleForm.lat) : ''" :placeholder="$t('message.device.formI18nPlaceholder.deviceLng')" @click="selectMap(ruleForm)" read-only />
|
|
|
</el-form-item>
|
|
|
|
|
|
- <el-form-item label="标签设置" prop="lng">
|
|
|
+ <!-- 标签设置 -->
|
|
|
+ <el-form-item :label="$t('message.device.formI18nLabel.tagSetting')" prop="lng">
|
|
|
<div class="tags-wrapper">
|
|
|
- <el-button type="primary" size="small" @click="toAddTag">添加标签</el-button>
|
|
|
+ <!-- 添加标签 -->
|
|
|
+ <el-button type="primary" size="small" @click="toAddTag">{{ $t('message.device.formI18nButton.addTag') }}</el-button>
|
|
|
<div class="tags">
|
|
|
<div class="tag flex" v-for="tag, i in ruleForm.tags" :key="tag.key">
|
|
|
<div class="capsule mr-3">
|
|
|
<div class="label">{{ tag.name }}</div>
|
|
|
<div class="value">{{ tag.value }}</div>
|
|
|
</div>
|
|
|
- <el-button type="warning" size="small" @click="toUpdateTag(tag)">修改</el-button>
|
|
|
- <el-button type="danger" size="small" @click="delTagRow(i)">删除</el-button>
|
|
|
+ <!-- 编辑 -->
|
|
|
+ <el-button type="warning" size="small" @click="toUpdateTag(tag)">{{ $t('message.formI18nButton.edit') }}</el-button>
|
|
|
+ <!-- 删除 -->
|
|
|
+ <el-button type="danger" size="small" @click="delTagRow(i)">{{ $t('message.formI18nButton.delete') }}</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-form-item>
|
|
|
<template v-if="ruleForm.authType === 1 || ruleForm.authType === 2">
|
|
|
- <el-form-item label="认证方式" prop="">
|
|
|
+ <!-- 认证方式 -->
|
|
|
+ <el-form-item :label="$t('message.device.formI18nLabel.authType')" prop="">
|
|
|
<el-radio-group v-model="ruleForm.authType">
|
|
|
<el-radio :label="1">Basic</el-radio>
|
|
|
<el-radio :label="2">AccessToken</el-radio>
|
|
|
</el-radio-group>
|
|
|
</el-form-item>
|
|
|
<template v-if="ruleForm.authType === 1">
|
|
|
- <el-form-item label="用户名" prop="authUser">
|
|
|
- <el-input v-model="ruleForm.authUser" placeholder="请输入用户名" />
|
|
|
+ <!-- 用户名 -->
|
|
|
+ <el-form-item :label="$t('message.device.formI18nLabel.authUser')" prop="authUser">
|
|
|
+ <!-- 请输入用户名 -->
|
|
|
+ <el-input v-model="ruleForm.authUser" :placeholder="$t('message.device.formI18nPlaceholder.authUser')" />
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="密码" prop="authPasswd">
|
|
|
- <el-input type="password" v-model="ruleForm.authPasswd" placeholder="请输入密码" />
|
|
|
+ <!-- 密码 -->
|
|
|
+ <el-form-item :label="$t('message.device.formI18nLabel.authPasswd')" prop="authPasswd">
|
|
|
+ <!-- 请输入密码 -->
|
|
|
+ <el-input type="password" v-model="ruleForm.authPasswd" :placeholder="$t('message.device.formI18nPlaceholder.authPasswd')" />
|
|
|
</el-form-item>
|
|
|
</template>
|
|
|
<template v-else>
|
|
|
<el-form-item label="Aceess Token" prop="accessToken">
|
|
|
- <el-input v-model="ruleForm.accessToken" placeholder="请输入Aceess Token" />
|
|
|
+ <!-- 请输入Aceess Token -->
|
|
|
+ <el-input v-model="ruleForm.accessToken" :placeholder="$t('message.device.formI18nPlaceholder.accessToken')" />
|
|
|
</el-form-item>
|
|
|
</template>
|
|
|
</template>
|
|
|
<template v-else-if="ruleForm.authType === 3">
|
|
|
- <el-form-item label="认证证书" prop="certificateId">
|
|
|
- <el-select v-model="ruleForm.certificateId" placeholder="请选择证书">
|
|
|
+ <!-- 认证证书 -->
|
|
|
+ <el-form-item :label="$t('message.device.formI18nLabel.certificateId')" prop="certificateId">
|
|
|
+ <!-- 请选择认证证书 -->
|
|
|
+ <el-select v-model="ruleForm.certificateId" :placeholder="$t('message.device.formI18nPlaceholder.certificateId')">
|
|
|
<el-option v-for="cert in certList" :key="cert.id" :label="cert.name" :value="cert.id"> </el-option>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
</template>
|
|
|
- <el-form-item label="固件版本号" prop="version">
|
|
|
- <el-input v-model="ruleForm.version" placeholder="请输入固件版本号" />
|
|
|
+ <!-- 固件版本号 -->
|
|
|
+ <el-form-item :label="$t('message.device.formI18nLabel.firmwareVersion')" prop="version">
|
|
|
+ <!-- 请输入固件版本号 -->
|
|
|
+ <el-input v-model="ruleForm.version" :placeholder="$t('message.device.formI18nPlaceholder.firmwareVersion')" />
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="备注" prop="desc">
|
|
|
- <el-input v-model="ruleForm.desc" type="textarea" placeholder="请输入内容"></el-input>
|
|
|
+ <!-- 备注 -->
|
|
|
+ <el-form-item :label="$t('message.device.formI18nLabel.remark')" prop="desc">
|
|
|
+ <!-- 请输入备注 -->
|
|
|
+ <el-input v-model="ruleForm.desc" type="textarea" :placeholder="$t('message.device.formI18nPlaceholder.enterContent')"></el-input>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="设备说明">
|
|
|
- <el-input v-model="intro" type="textarea" placeholder="请输入设备说明"></el-input>
|
|
|
+ <!-- 设备说明 -->
|
|
|
+ <el-form-item :label="$t('message.device.formI18nLabel.deviceDescription')">
|
|
|
+ <!-- 请输入设备说明 -->
|
|
|
+ <el-input v-model="intro" type="textarea" :placeholder="$t('message.device.formI18nPlaceholder.deviceDescription')"></el-input>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="设备图片">
|
|
|
+ <!-- 设备图片 -->
|
|
|
+ <el-form-item :label="$t('message.device.formI18nLabel.deviceImage')">
|
|
|
<upload-vue :imgs="phone" key="phone" @set-imgs="setImgsPhone" :limit="deviceImgLimit"></upload-vue>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="证书图片">
|
|
|
+ <!-- 证书图片 -->
|
|
|
+ <el-form-item :label="$t('message.device.formI18nLabel.certificateImage')">
|
|
|
<upload-vue :imgs="certificate" key="certificate" @set-imgs="setImgsCertificate" :limit="certificateLimit"></upload-vue>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
<template #footer>
|
|
|
<span class="dialog-footer">
|
|
|
- <el-button @click="onCancel">取 消</el-button>
|
|
|
- <el-button type="primary" @click="onSubmit">{{ ruleForm.id !== 0 ? '修 改' : '添 加' }}</el-button>
|
|
|
+ <!-- 取消 -->
|
|
|
+ <el-button @click="onCancel">{{ $t('message.tableI18nAction.cancel') }}</el-button>
|
|
|
+ <!-- 编辑/新增 -->
|
|
|
+ <el-button type="primary" @click="onSubmit">{{ ruleForm.id !== 0 ? $t('message.tableI18nAction.edit') : $t('message.tableI18nAction.add') }}</el-button>
|
|
|
</span>
|
|
|
</template>
|
|
|
</el-dialog>
|
|
|
@@ -89,7 +120,7 @@
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts">
|
|
|
-import { reactive, toRefs, defineComponent, ref, unref } from 'vue';
|
|
|
+import { reactive, toRefs, defineComponent, ref, unref, computed } from 'vue';
|
|
|
import api from '/@/api/device';
|
|
|
import apiSystem from '/@/api/system';
|
|
|
import { ElMessage, UploadProps } from "element-plus";
|
|
|
@@ -97,6 +128,8 @@ import tagVue from './tag.vue';
|
|
|
import Map from './map.vue';
|
|
|
import UploadVue from '/@/components/upload/index.vue';
|
|
|
import certApi from '/@/api/certificateManagement';
|
|
|
+import { useI18n } from "vue-i18n";
|
|
|
+
|
|
|
|
|
|
interface RuleFormState {
|
|
|
id: number;
|
|
|
@@ -141,7 +174,7 @@ interface DicState {
|
|
|
product: any;
|
|
|
isShowDialog: boolean;
|
|
|
ruleForm: RuleFormState;
|
|
|
- rules: {};
|
|
|
+ // rules: {};
|
|
|
deviceImgLimit: number;
|
|
|
certificateLimit: number;
|
|
|
phone: string[];
|
|
|
@@ -167,6 +200,20 @@ export default defineComponent({
|
|
|
const loading = ref(false);
|
|
|
const mapRef = ref();
|
|
|
const certList = ref<any[]>([])
|
|
|
+ const { t, locale } = useI18n();
|
|
|
+ const currentLocale = computed(() => locale.value);
|
|
|
+ const rules = computed(() => ({
|
|
|
+ // 设备名称不能为空
|
|
|
+ name: [
|
|
|
+ { required: true, message: t('message.device.rules.deviceName'), trigger: "change" }
|
|
|
+ ],
|
|
|
+ // 设备标识最少五个字符
|
|
|
+ key: [
|
|
|
+ { required: true, message: t('message.device.rules.deviceKeyMin5'), trigger: "change", min: 5 }
|
|
|
+ ],
|
|
|
+ // 所属产品不能为空
|
|
|
+ productKey: [{ required: true, message: t('message.device.rules.productIsNotEmpty'), trigger: 'change' }],
|
|
|
+ }))
|
|
|
const state = reactive<DicState>({
|
|
|
isShowDialog: false,
|
|
|
product: {},
|
|
|
@@ -174,15 +221,6 @@ export default defineComponent({
|
|
|
ruleForm: {
|
|
|
...form
|
|
|
},
|
|
|
- rules: {
|
|
|
- name: [
|
|
|
- { required: true, message: "设备名称不能为空", trigger: "change" }
|
|
|
- ],
|
|
|
- key: [
|
|
|
- { required: true, message: "设备标识最少五个字符", trigger: "change", min: 5 }
|
|
|
- ],
|
|
|
- productKey: [{ required: true, message: '所属产品不能为空', trigger: 'change' }],
|
|
|
- },
|
|
|
deviceImgLimit: 0,
|
|
|
certificateLimit: 0,
|
|
|
phone: [],
|
|
|
@@ -262,7 +300,7 @@ export default defineComponent({
|
|
|
formWrap.validate((valid: boolean) => {
|
|
|
if (valid) {
|
|
|
if (state.ruleForm.id !== 0) {
|
|
|
- //修改
|
|
|
+ //修辑
|
|
|
const params = {
|
|
|
...state.ruleForm,
|
|
|
extensionInfo: JSON.stringify({
|
|
|
@@ -272,22 +310,22 @@ export default defineComponent({
|
|
|
})
|
|
|
}
|
|
|
api.instance.edit(params).then(() => {
|
|
|
- ElMessage.success('设备类型修改成功');
|
|
|
+ ElMessage.success(t('message.tableI18nConfirm.editSuccess'));
|
|
|
closeDialog(); // 关闭弹窗
|
|
|
emit('typeList')
|
|
|
})
|
|
|
} else {
|
|
|
- //添加
|
|
|
+ //新增
|
|
|
const params = {
|
|
|
...state.ruleForm,
|
|
|
extensionInfo: JSON.stringify({
|
|
|
"phone": state.phone,
|
|
|
"certificate": state.certificate,
|
|
|
- "intro": state.intro
|
|
|
+ "intro": state.intro
|
|
|
})
|
|
|
}
|
|
|
api.instance.add(params).then(() => {
|
|
|
- ElMessage.success('设备类型添加成功');
|
|
|
+ ElMessage.success(t('message.tableI18nConfirm.addSuccess'));
|
|
|
closeDialog(); // 关闭弹窗
|
|
|
emit('typeList')
|
|
|
})
|
|
|
@@ -328,6 +366,8 @@ export default defineComponent({
|
|
|
}
|
|
|
|
|
|
return {
|
|
|
+ currentLocale,
|
|
|
+ rules,
|
|
|
loading,
|
|
|
certList,
|
|
|
productKeyChange,
|
