mirror of
https://github.com/xinnan-tech/xiaozhi-esp32-server.git
synced 2026-07-23 07:33:53 +08:00
updata:智控台页面添加语言切换,支持中英繁。
This commit is contained in:
@@ -9,44 +9,44 @@
|
||||
|
||||
<button class="custom-close-btn" @click="handleClose">×</button>
|
||||
|
||||
<el-form :model="form" label-width="100px" :rules="rules" ref="form" class="custom-form">
|
||||
<el-form :model="form" label-width="auto" :rules="rules" ref="form" class="custom-form">
|
||||
<div style="display: flex; gap: 20px; margin-bottom: 20px;">
|
||||
<el-form-item label="类别" prop="modelType" style="flex: 1;">
|
||||
<el-select v-model="form.modelType" placeholder="请选择类别" class="custom-input-bg" style="width: 100%;">
|
||||
<el-form-item :label="$t('providerDialog.category')" prop="modelType" style="flex: 1;">
|
||||
<el-select v-model="form.modelType" :placeholder="$t('providerDialog.selectCategory')" class="custom-input-bg" style="width: 100%;">
|
||||
<el-option v-for="item in modelTypes" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="编码" prop="providerCode" style="flex: 1;">
|
||||
<el-input v-model="form.providerCode" placeholder="请输入供应器编码" class="custom-input-bg"></el-input>
|
||||
<el-form-item :label="$t('providerDialog.code')" prop="providerCode" style="flex: 1;">
|
||||
<el-input v-model="form.providerCode" :placeholder="$t('providerDialog.inputCode')" class="custom-input-bg"></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; gap: 20px; margin-bottom: 20px;">
|
||||
<el-form-item label="名称" prop="name" style="flex: 1;">
|
||||
<el-input v-model="form.name" placeholder="请输入供应器名称" class="custom-input-bg"></el-input>
|
||||
<el-form-item :label="$t('providerDialog.name')" prop="name" style="flex: 1;">
|
||||
<el-input v-model="form.name" :placeholder="$t('providerDialog.inputName')" class="custom-input-bg"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort" style="flex: 1;">
|
||||
<el-form-item :label="$t('providerDialog.sort')" prop="sort" style="flex: 1;">
|
||||
<el-input-number v-model="form.sort" :min="0" controls-position="right" class="custom-input-bg"
|
||||
style="width: 100%;"></el-input-number>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div style="font-size: 20px; font-weight: bold; color: #3d4566; margin-bottom: 15px;">
|
||||
字段配置
|
||||
{{ $t('providerDialog.fieldConfig') }}
|
||||
<div style="display: inline-block; float: right;">
|
||||
<el-button type="primary" @click="addField" size="small" style="background: #5bc98c; border: none;"
|
||||
:disabled="hasIncompleteFields">
|
||||
添加
|
||||
{{ $t('providerDialog.add') }}
|
||||
</el-button>
|
||||
<el-button type="primary" @click="toggleSelectAllFields" size="small"
|
||||
style="background: #5f70f3; border: none; margin-left: 10px;">
|
||||
{{ isAllFieldsSelected ? '取消全选' : '全选' }}
|
||||
{{ isAllFieldsSelected ? $t('providerDialog.deselectAll') : $t('providerDialog.selectAll') }}
|
||||
</el-button>
|
||||
<el-button type="danger" @click="batchRemoveFields" size="small"
|
||||
style="background: red; border: none; margin-left: 10px;">
|
||||
批量删除
|
||||
{{ $t('providerDialog.batchDelete') }}
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -54,40 +54,40 @@
|
||||
|
||||
<div class="fields-container">
|
||||
<el-table :data="form.fields" style="width: 100%;" border size="medium" :key="tableKey">
|
||||
<el-table-column label="选择" align="center" width="50">
|
||||
<el-table-column :label="$t('modelConfig.select')" align="center" width="50">
|
||||
<template slot-scope="scope">
|
||||
<el-checkbox v-model="scope.row.selected" @change="handleFieldSelectChange"></el-checkbox>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="字段key">
|
||||
<el-table-column :label="$t('providerDialog.fieldKey')">
|
||||
<template slot-scope="scope">
|
||||
<template v-if="scope.row.editing">
|
||||
<el-input v-model="scope.row.key" placeholder="字段key"></el-input>
|
||||
<el-input v-model="scope.row.key" :placeholder="$t('providerDialog.fieldKey')"></el-input>
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ scope.row.key }}
|
||||
</template>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="字段标签">
|
||||
<el-table-column :label="$t('providerDialog.fieldLabel')">
|
||||
<template slot-scope="scope">
|
||||
<template v-if="scope.row.editing">
|
||||
<el-input v-model="scope.row.label" placeholder="字段标签"></el-input>
|
||||
<el-input v-model="scope.row.label" :placeholder="$t('providerDialog.fieldLabel')"></el-input>
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ scope.row.label }}
|
||||
</template>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="字段类型">
|
||||
<el-table-column :label="$t('providerDialog.fieldType')">
|
||||
<template slot-scope="scope">
|
||||
<template v-if="scope.row.editing">
|
||||
<el-select v-model="scope.row.type" placeholder="类型">
|
||||
<el-option label="字符串" value="string"></el-option>
|
||||
<el-option label="数字" value="number"></el-option>
|
||||
<el-option label="布尔值" value="boolean"></el-option>
|
||||
<el-option label="字典" value="dict"></el-option>
|
||||
<el-option label="分号分割的列表" value="array"></el-option>
|
||||
<el-select v-model="scope.row.type" :placeholder="$t('providerDialog.type')">
|
||||
<el-option :label="$t('providerDialog.stringType')" value="string"></el-option>
|
||||
<el-option :label="$t('providerDialog.numberType')" value="number"></el-option>
|
||||
<el-option :label="$t('providerDialog.booleanType')" value="boolean"></el-option>
|
||||
<el-option :label="$t('providerDialog.dictType')" value="dict"></el-option>
|
||||
<el-option :label="$t('providerDialog.arrayType')" value="array"></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
<template v-else>
|
||||
@@ -95,26 +95,26 @@
|
||||
</template>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="默认值">
|
||||
<el-table-column :label="$t('providerDialog.defaultValue')">
|
||||
<template slot-scope="scope">
|
||||
<template v-if="scope.row.editing">
|
||||
<el-input v-model="scope.row.default" placeholder="请输入默认值"></el-input>
|
||||
<el-input v-model="scope.row.default" :placeholder="$t('providerDialog.inputDefaultValue')"></el-input>
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ scope.row.default }}
|
||||
</template>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="150" align="center">
|
||||
<el-table-column :label="$t('providerDialog.operation')" width="150" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-button v-if="!scope.row.editing" type="primary" size="mini" @click="startEditing(scope.row)">
|
||||
编辑
|
||||
{{ $t('providerDialog.edit') }}
|
||||
</el-button>
|
||||
<el-button v-else type="success" size="mini" @click="stopEditing(scope.row)">
|
||||
完成
|
||||
{{ $t('providerDialog.complete') }}
|
||||
</el-button>
|
||||
<el-button type="danger" size="mini" @click="removeField(scope.$index)">
|
||||
删除
|
||||
{{ $t('providerDialog.delete') }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
@@ -124,7 +124,7 @@
|
||||
</div>
|
||||
|
||||
<div style="display: flex; justify-content: center;">
|
||||
<el-button type="primary" @click="submit" class="save-btn" :loading="saving">保存</el-button>
|
||||
<el-button type="primary" @click="submit" class="save-btn" :loading="saving">{{ $t('providerDialog.save') }}</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
@@ -140,15 +140,19 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
saving: false,
|
||||
rules: {
|
||||
modelType: [{ required: true, message: '请选择类别', trigger: 'change' }],
|
||||
providerCode: [{ required: true, message: '请输入供应器编码', trigger: 'blur' }],
|
||||
name: [{ required: true, message: '请输入供应器名称', trigger: 'blur' }]
|
||||
},
|
||||
isAllFieldsSelected: false,
|
||||
tableKey: 0 // 用于强制表格重新渲染
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
rules() {
|
||||
return {
|
||||
modelType: [{ required: true, message: this.$t('providerDialog.requiredCategory'), trigger: 'change' }],
|
||||
providerCode: [{ required: true, message: this.$t('providerDialog.requiredCode'), trigger: 'blur' }],
|
||||
name: [{ required: true, message: this.$t('providerDialog.requiredName'), trigger: 'blur' }]
|
||||
};
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
hasIncompleteFields() {
|
||||
return this.form.fields && this.form.fields.some(field =>
|
||||
@@ -159,11 +163,11 @@ export default {
|
||||
methods: {
|
||||
getTypeLabel(type) {
|
||||
const typeMap = {
|
||||
'string': '字符串',
|
||||
'number': '数字',
|
||||
'boolean': '布尔值',
|
||||
'dict': '字典',
|
||||
'array': '分号分割的列表'
|
||||
'string': this.$t('providerDialog.stringType'),
|
||||
'number': this.$t('providerDialog.numberType'),
|
||||
'boolean': this.$t('providerDialog.booleanType'),
|
||||
'dict': this.$t('providerDialog.dictType'),
|
||||
'array': this.$t('providerDialog.arrayType')
|
||||
};
|
||||
return typeMap[type];
|
||||
},
|
||||
@@ -212,7 +216,7 @@ export default {
|
||||
addField() {
|
||||
if (this.hasIncompleteFields) {
|
||||
this.$message.warning({
|
||||
message: '请先完成当前字段的编辑',
|
||||
message: this.$t('providerDialog.completeFieldEdit'),
|
||||
showClose: true
|
||||
});
|
||||
return;
|
||||
@@ -230,47 +234,47 @@ export default {
|
||||
},
|
||||
|
||||
removeField(index) {
|
||||
this.$confirm('确定要删除该字段吗?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
this.$confirm(this.$t('providerDialog.confirmDeleteField'), this.$t('common.warning'), {
|
||||
confirmButtonText: this.$t('common.confirm'),
|
||||
cancelButtonText: this.$t('common.cancel'),
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.form.fields = this.form.fields.filter((_, i) => i !== index);
|
||||
this.updateSelectAllStatus();
|
||||
this.forceTableRerender();
|
||||
this.$message.success({
|
||||
message: '删除成功',
|
||||
showClose: true
|
||||
});
|
||||
message: this.$t('common.deleteSuccess'),
|
||||
showClose: true
|
||||
});
|
||||
}).catch(() => {
|
||||
this.$message.info({
|
||||
message: '已取消删除',
|
||||
showClose: true
|
||||
this.$message.info({
|
||||
message: this.$t('common.deleteCancelled'),
|
||||
showClose: true
|
||||
});
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
batchRemoveFields() {
|
||||
const selectedFields = this.form.fields.filter(field => field.selected);
|
||||
if (selectedFields.length === 0) {
|
||||
this.$message.warning({
|
||||
message: '请先选择要删除的字段',
|
||||
message: this.$t('providerDialog.selectFieldsToDelete'),
|
||||
showClose: true
|
||||
});
|
||||
return;
|
||||
}
|
||||
this.$confirm(`确定要删除选中的 ${selectedFields.length} 个字段吗?`, '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
this.$confirm(this.$t('providerDialog.confirmBatchDeleteFields', { count: selectedFields.length }), this.$t('common.warning'), {
|
||||
confirmButtonText: this.$t('common.confirm'),
|
||||
cancelButtonText: this.$t('common.cancel'),
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.form.fields = this.form.fields.filter(field => !field.selected);
|
||||
this.isAllFieldsSelected = false;
|
||||
this.forceTableRerender();
|
||||
this.$message.success({
|
||||
message: `成功删除 ${selectedFields.length} 个字段`,
|
||||
showClose: true
|
||||
});
|
||||
message: this.$t('providerDialog.batchDeleteFieldsSuccess', { count: selectedFields.length }),
|
||||
showClose: true
|
||||
});
|
||||
}).catch(() => {
|
||||
this.$message.info({
|
||||
message: '已取消删除',
|
||||
@@ -293,12 +297,12 @@ export default {
|
||||
if (valid) {
|
||||
const editingField = this.form.fields.find(field => field.editing);
|
||||
if (editingField) {
|
||||
this.$message.warning({
|
||||
message: '请先完成当前字段的编辑',
|
||||
showClose: true
|
||||
});
|
||||
return;
|
||||
}
|
||||
this.$message.warning({
|
||||
message: this.$t('providerDialog.completeFieldEdit'),
|
||||
showClose: true
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
this.form.fields = this.form.fields.map(field => ({
|
||||
...field,
|
||||
|
||||
Reference in New Issue
Block a user