Merge branch 'master' of http://119.91.43.128:3001/sheng/mes-ui-d2
This commit is contained in:
22
docs/用户管理模块表单UX验证.md
Normal file
22
docs/用户管理模块表单UX验证.md
Normal file
@@ -0,0 +1,22 @@
|
|||||||
|
# 用户管理模块表单 UX 验证
|
||||||
|
|
||||||
|
## Findings
|
||||||
|
|
||||||
|
- **High** `src/views/system-administration/user-management/user/index.vue`: 已修复新增/编辑弹窗表单模型未在 `data()` 中声明的问题。该问题会导致 Vue 2 根级动态属性不具备可靠响应式,输入框和下拉框在弹窗中表现为无法正常录入或选择。
|
||||||
|
- **Medium** `src/views/system-administration/user-management/user/index.vue`: 已补充状态查询项,查询参数会随 `username`、`nickname` 一起传给列表接口,用于按启用/停用筛选用户。
|
||||||
|
- **Medium** `src/views/system-administration/user-management/user/index.vue`: 已将账号重复校验、确认密码一致性校验接入 Element 表单规则,错误会出现在对应字段附近,而不是只依赖提交后的全局提示。
|
||||||
|
- **Medium** `src/views/system-administration/user-management/user/index.vue`: 当前用户数据模型没有手机号、邮箱字段,接口封装也没有对应字段或独立校验接口。因此手机号/邮箱格式校验无法在不扩展前后端契约的情况下落地。建议后续先确认字段设计,再补充表单项、列表列、接口字段和格式规则。
|
||||||
|
- **Low** `src/components/page-dialog-form/index.vue`: 已补充 `show-password` 透传,并修复自定义 validator 没有 `message` 时被无条件翻译的问题,避免后续自定义表单校验不稳定。
|
||||||
|
|
||||||
|
## Evidence
|
||||||
|
|
||||||
|
- Browser: source-only。当前页面依赖登录态和后端接口,未做真实浏览器端新增用户提交。
|
||||||
|
- Source checks: 用户弹窗字段状态、表单规则、状态查询、权限按钮声明已核对。
|
||||||
|
- Build checks: 已通过 `eslint`、locale JSON 解析和生产构建验证语法与编译兼容性。
|
||||||
|
- Confidence limits: 账号重复检查复用现有列表接口,并按用户名精确匹配;如果后端列表接口只做模糊查询或分页限制异常,最终仍需后端唯一约束兜底。
|
||||||
|
|
||||||
|
## Suggested Shape
|
||||||
|
|
||||||
|
- 保持“账号/密码/确认密码/用户组/姓名/出入证编号/状态”的当前录入顺序,必填项优先,状态默认启用。
|
||||||
|
- 若业务确认需要手机号/邮箱,应放在姓名之后、出入证编号之前,并使用字段级格式提示。
|
||||||
|
- 删除、批量删除、重置密码、启停用等操作保持二次确认;接口失败时不应显示成功提示。
|
||||||
@@ -4,7 +4,7 @@ const BASE = 'production_configuration/spc_configuration/binding_scada_node/'
|
|||||||
|
|
||||||
function apiParams (method, data = {}) {
|
function apiParams (method, data = {}) {
|
||||||
return {
|
return {
|
||||||
method: `production_master_data_spc_configuration_data_collection_configuration_${method}`,
|
method: `production_configuration_spc_configuration_binding_scada_node_${method}`,
|
||||||
platform: 'background',
|
platform: 'background',
|
||||||
...data
|
...data
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -4,7 +4,7 @@ const BASE = 'production_configuration/factory_model/factory_area/'
|
|||||||
|
|
||||||
function apiParams (method, data = {}) {
|
function apiParams (method, data = {}) {
|
||||||
return {
|
return {
|
||||||
method: `production_master_data_factory_model_factory_area_${method}`,
|
method: `production_configuration_factory_model_factory_area_${method}`,
|
||||||
platform: 'background',
|
platform: 'background',
|
||||||
...data
|
...data
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -4,7 +4,7 @@ const BASE = 'production_configuration/factory_model/factory_line/'
|
|||||||
|
|
||||||
function apiParams (method, data = {}) {
|
function apiParams (method, data = {}) {
|
||||||
return {
|
return {
|
||||||
method: `production_master_data_factory_model_factory_line_${method}`,
|
method: `production_configuration_factory_model_factory_line_${method}`,
|
||||||
platform: 'background',
|
platform: 'background',
|
||||||
...data
|
...data
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -66,6 +66,7 @@
|
|||||||
v-model="formData[col.prop]"
|
v-model="formData[col.prop]"
|
||||||
:placeholder="$t(col.placeholder)"
|
:placeholder="$t(col.placeholder)"
|
||||||
:type="col.inputType || 'text'"
|
:type="col.inputType || 'text'"
|
||||||
|
:show-password="!!col.showPassword"
|
||||||
:autosize="col.autosize"
|
:autosize="col.autosize"
|
||||||
:clearable="col.clearable !== false"
|
:clearable="col.clearable !== false"
|
||||||
:disabled="!!col.disabled"
|
:disabled="!!col.disabled"
|
||||||
@@ -255,7 +256,13 @@ export default {
|
|||||||
const rules = this.rules || {}
|
const rules = this.rules || {}
|
||||||
const translated = {}
|
const translated = {}
|
||||||
for (const [field, validators] of Object.entries(rules)) {
|
for (const [field, validators] of Object.entries(rules)) {
|
||||||
translated[field] = validators.map(v => ({ ...v, message: this.$t(v.message) }))
|
translated[field] = validators.map(v => {
|
||||||
|
const rule = { ...v }
|
||||||
|
if (rule.message) {
|
||||||
|
rule.message = this.$t(rule.message)
|
||||||
|
}
|
||||||
|
return rule
|
||||||
|
})
|
||||||
}
|
}
|
||||||
return translated
|
return translated
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -27,7 +27,6 @@
|
|||||||
"create_success": "Created successfully",
|
"create_success": "Created successfully",
|
||||||
"edit_success": "Updated successfully",
|
"edit_success": "Updated successfully",
|
||||||
"delete_success": "Deleted successfully",
|
"delete_success": "Deleted successfully",
|
||||||
"sort": "No.",
|
|
||||||
"code": "Area Code",
|
"code": "Area Code",
|
||||||
"name": "Area Name",
|
"name": "Area Name",
|
||||||
"remark": "Remark",
|
"remark": "Remark",
|
||||||
@@ -45,19 +44,10 @@
|
|||||||
"confirm_delete": "Are you sure to delete?",
|
"confirm_delete": "Are you sure to delete?",
|
||||||
"validation_fail": "Validation failed",
|
"validation_fail": "Validation failed",
|
||||||
"please_enter": "Please enter {name}",
|
"please_enter": "Please enter {name}",
|
||||||
"parent_area": "Parent Area",
|
|
||||||
"select_parent_area": "Please select parent area",
|
|
||||||
"status": "Status",
|
|
||||||
"select_status": "Please select status",
|
|
||||||
"enabled": "Enabled",
|
|
||||||
"disabled": "Disabled",
|
|
||||||
"add_child": "Add Subarea",
|
|
||||||
"add_child_title": "Add Subarea",
|
|
||||||
"export": "Export",
|
"export": "Export",
|
||||||
"confirm_export": "Create export task?",
|
"confirm_export": "Create export task?",
|
||||||
"length_1_100": "Length should be 1 to 100 characters",
|
"length_1_100": "Length should be 1 to 100 characters",
|
||||||
"remark_max_500": "Remark cannot exceed 500 characters",
|
"remark_max_500": "Remark cannot exceed 500 characters"
|
||||||
"parent_cycle_error": "Parent area cannot be itself or a child area"
|
|
||||||
},
|
},
|
||||||
"production_line": {
|
"production_line": {
|
||||||
"search": "Search",
|
"search": "Search",
|
||||||
@@ -66,7 +56,6 @@
|
|||||||
"enter_name": "Please enter production line name",
|
"enter_name": "Please enter production line name",
|
||||||
"enter_remark": "Please enter remark",
|
"enter_remark": "Please enter remark",
|
||||||
"operation_success": "Operation succeeded",
|
"operation_success": "Operation succeeded",
|
||||||
"sort": "No.",
|
|
||||||
"code": "Production Line Code",
|
"code": "Production Line Code",
|
||||||
"name": "Production Line Name",
|
"name": "Production Line Name",
|
||||||
"area": "Plant Area",
|
"area": "Plant Area",
|
||||||
@@ -85,10 +74,6 @@
|
|||||||
"tip": "Tip",
|
"tip": "Tip",
|
||||||
"confirm_delete": "Are you sure to delete?",
|
"confirm_delete": "Are you sure to delete?",
|
||||||
"validation_fail": "Validation failed",
|
"validation_fail": "Validation failed",
|
||||||
"status": "Status",
|
|
||||||
"select_status": "Please select status",
|
|
||||||
"enabled": "Enabled",
|
|
||||||
"disabled": "Disabled",
|
|
||||||
"export": "Export",
|
"export": "Export",
|
||||||
"confirm_export": "Create export task?",
|
"confirm_export": "Create export task?",
|
||||||
"length_1_100": "Length should be 1 to 100 characters",
|
"length_1_100": "Length should be 1 to 100 characters",
|
||||||
@@ -696,6 +681,28 @@
|
|||||||
"confirm_delete": "Are you sure to delete this SPC collection configuration?",
|
"confirm_delete": "Are you sure to delete this SPC collection configuration?",
|
||||||
"validation_fail": "Validation failed",
|
"validation_fail": "Validation failed",
|
||||||
"please_enter": "Please enter {name}",
|
"please_enter": "Please enter {name}",
|
||||||
|
"result_param": "Result Parameter",
|
||||||
|
"result_param_code": "Result Parameter Code",
|
||||||
|
"result_param_name": "Result Parameter Name",
|
||||||
|
"enter_result_param_code": "Please enter result parameter code",
|
||||||
|
"enter_result_param_name": "Please enter result parameter name",
|
||||||
|
"scada_node_code": "SCADA Node Code",
|
||||||
|
"scada_node_name": "SCADA Node Name",
|
||||||
|
"enter_scada_node_code": "Please enter SCADA node code",
|
||||||
|
"enter_scada_node_name": "Please enter SCADA node name",
|
||||||
|
"working_subclass": "Process Step",
|
||||||
|
"select_working_subclass": "Please select process step",
|
||||||
|
"category": "Category",
|
||||||
|
"select_data_type": "Please select data type",
|
||||||
|
"select_result_param": "Please select result parameter",
|
||||||
|
"select_scada_node": "Please select SCADA node",
|
||||||
|
"result_param_type": "Result Parameter Type",
|
||||||
|
"process_inspection": "Process Inspection",
|
||||||
|
"result_data": "Result Data",
|
||||||
|
"measurement_type": "Measurement Type",
|
||||||
|
"count_type": "Count Type",
|
||||||
|
"create_time": "Created Time",
|
||||||
|
"update_data": "Updated Time",
|
||||||
"help": "Configure SPC data collection parameters and bind SCADA nodes"
|
"help": "Configure SPC data collection parameters and bind SCADA nodes"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -2344,6 +2351,7 @@
|
|||||||
"status": "Status",
|
"status": "Status",
|
||||||
"enable": "Enabled",
|
"enable": "Enabled",
|
||||||
"disable": "Disabled",
|
"disable": "Disabled",
|
||||||
|
"select_status": "Please select status",
|
||||||
"user_group": "User Group",
|
"user_group": "User Group",
|
||||||
"login_ip": "Last Login IP",
|
"login_ip": "Last Login IP",
|
||||||
"last_login_time": "Last Login Time",
|
"last_login_time": "Last Login Time",
|
||||||
@@ -2370,6 +2378,7 @@
|
|||||||
"password_not_match": "Passwords do not match",
|
"password_not_match": "Passwords do not match",
|
||||||
"password_length": "Length should be 6 to 64 characters",
|
"password_length": "Length should be 6 to 64 characters",
|
||||||
"username_length": "Length should be 3 to 20 characters",
|
"username_length": "Length should be 3 to 20 characters",
|
||||||
|
"username_exists": "Username already exists. Please use another username",
|
||||||
"cannot_delete_self": "Cannot delete own account",
|
"cannot_delete_self": "Cannot delete own account",
|
||||||
"cannot_operate_self": "Cannot operate own account",
|
"cannot_operate_self": "Cannot operate own account",
|
||||||
"batch_delete": "Batch Delete",
|
"batch_delete": "Batch Delete",
|
||||||
|
|||||||
@@ -27,7 +27,6 @@
|
|||||||
"create_success": "新增成功",
|
"create_success": "新增成功",
|
||||||
"edit_success": "编辑成功",
|
"edit_success": "编辑成功",
|
||||||
"delete_success": "删除成功",
|
"delete_success": "删除成功",
|
||||||
"sort": "序号",
|
|
||||||
"code": "所区编码",
|
"code": "所区编码",
|
||||||
"name": "所区名称",
|
"name": "所区名称",
|
||||||
"remark": "备注",
|
"remark": "备注",
|
||||||
@@ -45,19 +44,10 @@
|
|||||||
"confirm_delete": "确定要执行该操作吗?",
|
"confirm_delete": "确定要执行该操作吗?",
|
||||||
"validation_fail": "校验失败",
|
"validation_fail": "校验失败",
|
||||||
"please_enter": "请输入{name}",
|
"please_enter": "请输入{name}",
|
||||||
"parent_area": "上级区域",
|
|
||||||
"select_parent_area": "请选择上级区域",
|
|
||||||
"status": "状态",
|
|
||||||
"select_status": "请选择状态",
|
|
||||||
"enabled": "启用",
|
|
||||||
"disabled": "禁用",
|
|
||||||
"add_child": "新增子区域",
|
|
||||||
"add_child_title": "新增子区域",
|
|
||||||
"export": "导出",
|
"export": "导出",
|
||||||
"confirm_export": "确认创建导出任务?",
|
"confirm_export": "确认创建导出任务?",
|
||||||
"length_1_100": "长度在 1 到 100 个字符",
|
"length_1_100": "长度在 1 到 100 个字符",
|
||||||
"remark_max_500": "备注不能超过 500 个字符",
|
"remark_max_500": "备注不能超过 500 个字符"
|
||||||
"parent_cycle_error": "上级区域不能选择自身或下级区域"
|
|
||||||
},
|
},
|
||||||
"production_line": {
|
"production_line": {
|
||||||
"search": "查询",
|
"search": "查询",
|
||||||
@@ -66,7 +56,6 @@
|
|||||||
"enter_name": "请输入产线名称",
|
"enter_name": "请输入产线名称",
|
||||||
"enter_remark": "请输入备注",
|
"enter_remark": "请输入备注",
|
||||||
"operation_success": "操作成功",
|
"operation_success": "操作成功",
|
||||||
"sort": "序号",
|
|
||||||
"code": "产线编码",
|
"code": "产线编码",
|
||||||
"name": "产线名称",
|
"name": "产线名称",
|
||||||
"area": "所区",
|
"area": "所区",
|
||||||
@@ -85,10 +74,6 @@
|
|||||||
"tip": "提示",
|
"tip": "提示",
|
||||||
"confirm_delete": "确定要执行该操作吗?",
|
"confirm_delete": "确定要执行该操作吗?",
|
||||||
"validation_fail": "校验失败",
|
"validation_fail": "校验失败",
|
||||||
"status": "状态",
|
|
||||||
"select_status": "请选择状态",
|
|
||||||
"enabled": "启用",
|
|
||||||
"disabled": "禁用",
|
|
||||||
"export": "导出",
|
"export": "导出",
|
||||||
"confirm_export": "确认创建导出任务?",
|
"confirm_export": "确认创建导出任务?",
|
||||||
"length_1_100": "长度在 1 到 100 个字符",
|
"length_1_100": "长度在 1 到 100 个字符",
|
||||||
@@ -696,6 +681,28 @@
|
|||||||
"confirm_delete": "确定要删除该SPC采集配置吗?",
|
"confirm_delete": "确定要删除该SPC采集配置吗?",
|
||||||
"validation_fail": "校验失败",
|
"validation_fail": "校验失败",
|
||||||
"please_enter": "请输入{name}",
|
"please_enter": "请输入{name}",
|
||||||
|
"result_param": "结果参数",
|
||||||
|
"result_param_code": "结果参数编码",
|
||||||
|
"result_param_name": "结果参数名称",
|
||||||
|
"enter_result_param_code": "请输入结果参数编码",
|
||||||
|
"enter_result_param_name": "请输入结果参数名称",
|
||||||
|
"scada_node_code": "SCADA节点编码",
|
||||||
|
"scada_node_name": "SCADA节点名称",
|
||||||
|
"enter_scada_node_code": "请输入SCADA节点编码",
|
||||||
|
"enter_scada_node_name": "请输入SCADA节点名称",
|
||||||
|
"working_subclass": "工序",
|
||||||
|
"select_working_subclass": "请选择工序",
|
||||||
|
"category": "类别",
|
||||||
|
"select_data_type": "请选择数据类型",
|
||||||
|
"select_result_param": "请选择结果参数",
|
||||||
|
"select_scada_node": "请选择SCADA节点",
|
||||||
|
"result_param_type": "结果参数类型",
|
||||||
|
"process_inspection": "过程检验",
|
||||||
|
"result_data": "结果数据",
|
||||||
|
"measurement_type": "计量型",
|
||||||
|
"count_type": "计数型",
|
||||||
|
"create_time": "创建时间",
|
||||||
|
"update_data": "更新时间",
|
||||||
"help": "配置SPC数据采集参数,绑定SCADA节点"
|
"help": "配置SPC数据采集参数,绑定SCADA节点"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -2344,6 +2351,7 @@
|
|||||||
"status": "状态",
|
"status": "状态",
|
||||||
"enable": "启用",
|
"enable": "启用",
|
||||||
"disable": "禁用",
|
"disable": "禁用",
|
||||||
|
"select_status": "请选择状态",
|
||||||
"user_group": "用户组",
|
"user_group": "用户组",
|
||||||
"login_ip": "上次登录IP",
|
"login_ip": "上次登录IP",
|
||||||
"last_login_time": "上次登录时间",
|
"last_login_time": "上次登录时间",
|
||||||
@@ -2370,6 +2378,7 @@
|
|||||||
"password_not_match": "两次输入的密码不一致",
|
"password_not_match": "两次输入的密码不一致",
|
||||||
"password_length": "长度在 6 到 64 个字符",
|
"password_length": "长度在 6 到 64 个字符",
|
||||||
"username_length": "长度在 3 到 20 个字符",
|
"username_length": "长度在 3 到 20 个字符",
|
||||||
|
"username_exists": "账号已存在,请更换账号",
|
||||||
"cannot_delete_self": "不能删除自己的账号",
|
"cannot_delete_self": "不能删除自己的账号",
|
||||||
"cannot_operate_self": "不能操作自己的账号",
|
"cannot_operate_self": "不能操作自己的账号",
|
||||||
"batch_delete": "批量删除",
|
"batch_delete": "批量删除",
|
||||||
|
|||||||
@@ -467,12 +467,30 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
normalizeListResponse (res) {
|
normalizeListResponse (res) {
|
||||||
const data = Array.isArray(res) ? res : (res && res.data) || []
|
const root = res || {}
|
||||||
if (Array.isArray(data)) return { list: data, total: data.length }
|
const data = res && res.data !== undefined ? res.data : res
|
||||||
return {
|
if (Array.isArray(data)) {
|
||||||
list: data.data || [],
|
return { list: data, total: Number(root.count || root.total || data.length) }
|
||||||
total: data.count || 0
|
|
||||||
}
|
}
|
||||||
|
if (data && Array.isArray(data.list)) {
|
||||||
|
return { list: data.list, total: Number(root.count || root.total || data.count || data.total || data.list.length) }
|
||||||
|
}
|
||||||
|
if (data && Array.isArray(data.rows)) {
|
||||||
|
return { list: data.rows, total: Number(root.count || root.total || data.count || data.total || data.rows.length) }
|
||||||
|
}
|
||||||
|
if (data && Array.isArray(data.records)) {
|
||||||
|
return { list: data.records, total: Number(root.count || root.total || data.count || data.total || data.records.length) }
|
||||||
|
}
|
||||||
|
if (data && Array.isArray(data.data)) {
|
||||||
|
return { list: data.data, total: Number(root.count || root.total || data.count || data.total || data.data.length) }
|
||||||
|
}
|
||||||
|
if (data && data.data && Array.isArray(data.data.data)) {
|
||||||
|
return { list: data.data.data, total: Number(root.count || root.total || data.count || data.total || data.data.count || data.data.total || data.data.data.length) }
|
||||||
|
}
|
||||||
|
if (data && data.data && Array.isArray(data.data.list)) {
|
||||||
|
return { list: data.data.list, total: Number(root.count || root.total || data.count || data.total || data.data.count || data.data.total || data.data.list.length) }
|
||||||
|
}
|
||||||
|
return { list: [], total: 0 }
|
||||||
},
|
},
|
||||||
async fetchData () {
|
async fetchData () {
|
||||||
this.loading = true
|
this.loading = true
|
||||||
|
|||||||
@@ -9,12 +9,6 @@
|
|||||||
<el-form-item :label="$t(key('name'))">
|
<el-form-item :label="$t(key('name'))">
|
||||||
<el-input v-model="search.name" :placeholder="$t(key('enter_name'))" clearable style="width:200px" @keyup.enter.native="onSearch" />
|
<el-input v-model="search.name" :placeholder="$t(key('enter_name'))" clearable style="width:200px" @keyup.enter.native="onSearch" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item :label="$t(key('status'))">
|
|
||||||
<el-select v-model="search.status" :placeholder="$t(key('select_status'))" clearable style="width:140px" @change="onSearch">
|
|
||||||
<el-option value="1" :label="$t(key('enabled'))" />
|
|
||||||
<el-option value="0" :label="$t(key('disabled'))" />
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
<el-form-item>
|
||||||
<el-button type="primary" icon="el-icon-search" @click="onSearch">{{ $t(key('search')) }}</el-button>
|
<el-button type="primary" icon="el-icon-search" @click="onSearch">{{ $t(key('search')) }}</el-button>
|
||||||
<el-button icon="el-icon-refresh" @click="onReset">{{ $t(key('reset')) }}</el-button>
|
<el-button icon="el-icon-refresh" @click="onReset">{{ $t(key('reset')) }}</el-button>
|
||||||
@@ -31,17 +25,14 @@
|
|||||||
:loading="loading"
|
:loading="loading"
|
||||||
:toolbar-buttons="toolbarButtons"
|
:toolbar-buttons="toolbarButtons"
|
||||||
:row-buttons="rowButtons"
|
:row-buttons="rowButtons"
|
||||||
:pagination="null"
|
:pagination="pagination"
|
||||||
:table-attrs="tableAttrs"
|
:table-attrs="tableAttrs"
|
||||||
help-url="/help/factory-area"
|
help-url="/help/factory-area"
|
||||||
:help-text="$t(ckey('help'))"
|
:help-text="$t(ckey('help'))"
|
||||||
auto-height
|
auto-height
|
||||||
|
@page-change="onPageChange"
|
||||||
@selection-change="onSelect"
|
@selection-change="onSelect"
|
||||||
>
|
>
|
||||||
<template #col-status="{ row }">
|
|
||||||
<span v-if="String(row.status) === '1'" class="status-on"><i class="el-icon-circle-check" /> {{ $t(key('enabled')) }}</span>
|
|
||||||
<span v-else class="status-off"><i class="el-icon-circle-close" /> {{ $t(key('disabled')) }}</span>
|
|
||||||
</template>
|
|
||||||
</page-table>
|
</page-table>
|
||||||
|
|
||||||
<page-dialog-form
|
<page-dialog-form
|
||||||
@@ -49,7 +40,7 @@
|
|||||||
:visible.sync="dialogVisible"
|
:visible.sync="dialogVisible"
|
||||||
:title="dialogTitle"
|
:title="dialogTitle"
|
||||||
:width="'35%'"
|
:width="'35%'"
|
||||||
:form-cols="dialogFormCols"
|
:form-cols="baseFormCols"
|
||||||
:form-data="formData"
|
:form-data="formData"
|
||||||
:rules="rules"
|
:rules="rules"
|
||||||
:label-width="'100px'"
|
:label-width="'100px'"
|
||||||
@@ -91,13 +82,10 @@ export default {
|
|||||||
dialogTitle: '',
|
dialogTitle: '',
|
||||||
editId: '',
|
editId: '',
|
||||||
handleType: 'create',
|
handleType: 'create',
|
||||||
search: { code: '', name: '', status: '' },
|
search: { code: '', name: '' },
|
||||||
|
pagination: { current: 1, size: 10, total: 0 },
|
||||||
tableAttrs: { defaultExpandAll: true, treeProps: { children: 'children', hasChildren: 'hasChildren' } },
|
tableAttrs: { defaultExpandAll: true, treeProps: { children: 'children', hasChildren: 'hasChildren' } },
|
||||||
statusOptions: [
|
formData: { code: '', name: '', parent_id: '', remark: '' },
|
||||||
{ value: '1', label: this.$t(this.key('enabled')) },
|
|
||||||
{ value: '0', label: this.$t(this.key('disabled')) }
|
|
||||||
],
|
|
||||||
formData: { code: '', name: '', parent_id: '', status: '1', remark: '' },
|
|
||||||
rules: {
|
rules: {
|
||||||
code: [
|
code: [
|
||||||
{ required: true, message: this.key('enter_code'), trigger: 'blur' },
|
{ required: true, message: this.key('enter_code'), trigger: 'blur' },
|
||||||
@@ -107,7 +95,6 @@ export default {
|
|||||||
{ required: true, message: this.key('enter_name'), trigger: 'blur' },
|
{ required: true, message: this.key('enter_name'), trigger: 'blur' },
|
||||||
{ min: 1, max: 100, message: this.key('length_1_100'), trigger: 'blur' }
|
{ min: 1, max: 100, message: this.key('length_1_100'), trigger: 'blur' }
|
||||||
],
|
],
|
||||||
status: [{ required: true, message: this.key('select_status'), trigger: 'change' }],
|
|
||||||
remark: [{ max: 500, message: this.key('remark_max_500'), trigger: 'blur' }]
|
remark: [{ max: 500, message: this.key('remark_max_500'), trigger: 'blur' }]
|
||||||
},
|
},
|
||||||
columns: [],
|
columns: [],
|
||||||
@@ -116,34 +103,16 @@ export default {
|
|||||||
baseFormCols: [
|
baseFormCols: [
|
||||||
[{ type: 'input', prop: 'code', label: this.key('code'), placeholder: this.key('enter_code'), clearable: true, style: { width: '90%' } }],
|
[{ type: 'input', prop: 'code', label: this.key('code'), placeholder: this.key('enter_code'), clearable: true, style: { width: '90%' } }],
|
||||||
[{ type: 'input', prop: 'name', label: this.key('name'), placeholder: this.key('enter_name'), clearable: true, style: { width: '90%' } }],
|
[{ type: 'input', prop: 'name', label: this.key('name'), placeholder: this.key('enter_name'), clearable: true, style: { width: '90%' } }],
|
||||||
[{ type: 'select', prop: 'parent_id', label: this.key('parent_area'), placeholder: this.key('select_parent_area'), clearable: true, filterable: true, style: { width: '90%' }, options: [] }],
|
|
||||||
[{ type: 'select', prop: 'status', label: this.key('status'), placeholder: this.key('select_status'), clearable: false, style: { width: '90%' }, options: [] }],
|
|
||||||
[{ type: 'input', prop: 'remark', inputType: 'textarea', autosize: { minRows: 2, maxRows: 6 }, label: this.key('remark'), placeholder: this.key('remark_required'), clearable: true, style: { width: '90%' } }]
|
[{ type: 'input', prop: 'remark', inputType: 'textarea', autosize: { minRows: 2, maxRows: 6 }, label: this.key('remark'), placeholder: this.key('remark_required'), clearable: true, style: { width: '90%' } }]
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
|
||||||
dialogFormCols () {
|
|
||||||
const cols = JSON.parse(JSON.stringify(this.baseFormCols))
|
|
||||||
cols[2][0].options = this.parentAreaOptions
|
|
||||||
cols[3][0].options = this.statusOptions
|
|
||||||
return cols
|
|
||||||
},
|
|
||||||
parentAreaOptions () {
|
|
||||||
const disabledIds = this.handleType === 'edit' ? new Set([String(this.editId), ...this.collectDescendantIds(this.editId)]) : new Set()
|
|
||||||
return this.flattenTree(this.tableData)
|
|
||||||
.filter(item => !disabledIds.has(String(this.getId(item))))
|
|
||||||
.map(item => ({ value: this.getId(item), label: item._treeLabel || item.name }))
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created () {
|
created () {
|
||||||
this.columns = useTableColumns([
|
this.columns = useTableColumns([
|
||||||
{ prop: 'sort', label: this.key('sort'), width: 80 },
|
|
||||||
{ prop: 'code', label: this.key('code'), minWidth: 140 },
|
{ prop: 'code', label: this.key('code'), minWidth: 140 },
|
||||||
{ prop: 'name', label: this.key('name'), minWidth: 160 },
|
{ prop: 'name', label: this.key('name'), minWidth: 160 },
|
||||||
{ prop: 'status', label: this.key('status'), slot: 'status', width: 110 },
|
|
||||||
{ prop: 'remark', label: this.key('remark') },
|
{ prop: 'remark', label: this.key('remark') },
|
||||||
{ prop: '_actions', label: this.key('operation'), width: 230, fixed: 'right' }
|
{ prop: '_actions', label: this.key('operation'), width: 160, fixed: 'right' }
|
||||||
])
|
])
|
||||||
const btns = useTableButtons({
|
const btns = useTableButtons({
|
||||||
toolbar: [
|
toolbar: [
|
||||||
@@ -151,7 +120,6 @@ export default {
|
|||||||
{ key: 'export', label: this.key('export'), icon: 'el-icon-download', auth: '/production_configuration/factory_model/factory_area/export', onClick: this.handleExport }
|
{ key: 'export', label: this.key('export'), icon: 'el-icon-download', auth: '/production_configuration/factory_model/factory_area/export', onClick: this.handleExport }
|
||||||
],
|
],
|
||||||
row: [
|
row: [
|
||||||
{ key: 'addChild', label: this.key('add_child'), icon: 'el-icon-plus', auth: '/production_configuration/factory_model/factory_area/create', onClick: this.openAddChild },
|
|
||||||
{ key: 'edit', label: this.key('edit'), icon: 'el-icon-edit', auth: '/production_configuration/factory_model/factory_area/edit', onClick: this.openEdit },
|
{ key: 'edit', label: this.key('edit'), icon: 'el-icon-edit', auth: '/production_configuration/factory_model/factory_area/edit', onClick: this.openEdit },
|
||||||
{ key: 'delete', label: this.key('delete'), icon: 'el-icon-delete', color: 'danger', auth: '/production_configuration/factory_model/factory_area/delete', onClick: this.handleDelete }
|
{ key: 'delete', label: this.key('delete'), icon: 'el-icon-delete', color: 'danger', auth: '/production_configuration/factory_model/factory_area/delete', onClick: this.handleDelete }
|
||||||
]
|
]
|
||||||
@@ -172,11 +140,22 @@ export default {
|
|||||||
return ''
|
return ''
|
||||||
},
|
},
|
||||||
normalizeResponse (res) {
|
normalizeResponse (res) {
|
||||||
const data = res && res.data !== undefined ? res.data : res
|
const getTotal = (source, fallback) => {
|
||||||
if (Array.isArray(data)) return { list: data, total: data.length }
|
if (!source) return fallback
|
||||||
if (data && Array.isArray(data.list)) return { list: data.list, total: Number(data.count || data.total || data.list.length) }
|
const total = source.count ?? source.total ?? source.total_count ?? source.record_count
|
||||||
if (data && Array.isArray(data.data)) return { list: data.data, total: Number(data.count || data.total || data.data.length) }
|
const value = Number(total)
|
||||||
if (data && data.data && Array.isArray(data.data.data)) return { list: data.data.data, total: Number(data.data.count || data.data.total || data.data.data.length) }
|
return Number.isNaN(value) ? fallback : value
|
||||||
|
}
|
||||||
|
const containers = [res, res && res.data, res && res.data && res.data.data].filter(Boolean)
|
||||||
|
for (const item of containers) {
|
||||||
|
if (Array.isArray(item)) {
|
||||||
|
return { list: item, total: getTotal(res, item.length) }
|
||||||
|
}
|
||||||
|
const list = item.data || item.list || item.rows || item.records || item.items
|
||||||
|
if (Array.isArray(list)) {
|
||||||
|
return { list, total: getTotal(item, getTotal(res, list.length)) }
|
||||||
|
}
|
||||||
|
}
|
||||||
return { list: [], total: 0 }
|
return { list: [], total: 0 }
|
||||||
},
|
},
|
||||||
normalizeNode (row, level = 0) {
|
normalizeNode (row, level = 0) {
|
||||||
@@ -216,34 +195,41 @@ export default {
|
|||||||
})
|
})
|
||||||
return result
|
return result
|
||||||
},
|
},
|
||||||
collectDescendantIds (id) {
|
|
||||||
const current = this.flattenTree(this.tableData).find(item => String(this.getId(item)) === String(id))
|
|
||||||
if (!current || !Array.isArray(current.children)) return []
|
|
||||||
return this.flattenTree(current.children).map(item => String(this.getId(item)))
|
|
||||||
},
|
|
||||||
async fetchData () {
|
async fetchData () {
|
||||||
this.loading = true
|
this.loading = true
|
||||||
try {
|
try {
|
||||||
const res = await getFactoryAreaList({ ...this.search, page_no: 1, page_size: 10000 })
|
const res = await getFactoryAreaList({
|
||||||
|
...this.search,
|
||||||
|
page_no: this.pagination.current,
|
||||||
|
page_size: this.pagination.size
|
||||||
|
})
|
||||||
const data = this.normalizeResponse(res)
|
const data = this.normalizeResponse(res)
|
||||||
this.rawAreaData = data.list
|
this.rawAreaData = data.list
|
||||||
this.tableData = this.buildTree(data.list)
|
this.tableData = this.buildTree(data.list)
|
||||||
|
this.pagination.total = data.total
|
||||||
} finally {
|
} finally {
|
||||||
this.loading = false
|
this.loading = false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onSearch () {
|
onSearch () {
|
||||||
|
this.pagination.current = 1
|
||||||
this.fetchData()
|
this.fetchData()
|
||||||
},
|
},
|
||||||
onReset () {
|
onReset () {
|
||||||
this.search = { code: '', name: '', status: '' }
|
this.search = { code: '', name: '' }
|
||||||
|
this.pagination.current = 1
|
||||||
|
this.fetchData()
|
||||||
|
},
|
||||||
|
onPageChange (page) {
|
||||||
|
this.pagination.current = page.current
|
||||||
|
this.pagination.size = page.size
|
||||||
this.fetchData()
|
this.fetchData()
|
||||||
},
|
},
|
||||||
onSelect (rows) {
|
onSelect (rows) {
|
||||||
this.selectedRows = rows
|
this.selectedRows = rows
|
||||||
},
|
},
|
||||||
resetForm () {
|
resetForm () {
|
||||||
this.formData = { code: '', name: '', parent_id: '', status: '1', remark: '' }
|
this.formData = { code: '', name: '', parent_id: '', remark: '' }
|
||||||
this.editId = ''
|
this.editId = ''
|
||||||
},
|
},
|
||||||
openAdd () {
|
openAdd () {
|
||||||
@@ -255,34 +241,14 @@ export default {
|
|||||||
this.dialogVisible = true
|
this.dialogVisible = true
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
openAddChild (row) {
|
|
||||||
this.handleType = 'create'
|
|
||||||
this.dialogTitle = this.key('add_child_title')
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.$refs.dialogForm && this.$refs.dialogForm.reset()
|
|
||||||
this.resetForm()
|
|
||||||
this.formData.parent_id = this.getId(row)
|
|
||||||
this.dialogVisible = true
|
|
||||||
})
|
|
||||||
},
|
|
||||||
openEdit (row) {
|
openEdit (row) {
|
||||||
this.handleType = 'edit'
|
this.handleType = 'edit'
|
||||||
this.dialogTitle = this.key('edit_title')
|
this.dialogTitle = this.key('edit_title')
|
||||||
this.editId = this.getId(row)
|
this.editId = this.getId(row)
|
||||||
this.formData = { code: row.code, name: row.name, parent_id: this.getParentId(row), status: row.status !== undefined ? String(row.status) : '1', remark: row.remark || '' }
|
this.formData = { code: row.code, name: row.name, parent_id: this.getParentId(row), remark: row.remark || '' }
|
||||||
this.dialogVisible = true
|
this.dialogVisible = true
|
||||||
},
|
},
|
||||||
validateHierarchy () {
|
|
||||||
if (this.handleType !== 'edit' || this.formData.parent_id === '') return true
|
|
||||||
const parentId = String(this.formData.parent_id)
|
|
||||||
if (parentId === String(this.editId) || this.collectDescendantIds(this.editId).includes(parentId)) {
|
|
||||||
this.$message.warning(this.$t(this.key('parent_cycle_error')))
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
return true
|
|
||||||
},
|
|
||||||
async onDialogSubmit () {
|
async onDialogSubmit () {
|
||||||
if (!this.validateHierarchy()) return
|
|
||||||
this.submitting = true
|
this.submitting = true
|
||||||
try {
|
try {
|
||||||
if (this.handleType === 'create') await createFactoryArea(this.formData)
|
if (this.handleType === 'create') await createFactoryArea(this.formData)
|
||||||
@@ -310,6 +276,7 @@ export default {
|
|||||||
const ok = await this.confirmAction(this.key('confirm_delete'), () => deleteFactoryArea({ id: [this.getId(row)] }))
|
const ok = await this.confirmAction(this.key('confirm_delete'), () => deleteFactoryArea({ id: [this.getId(row)] }))
|
||||||
if (!ok) return
|
if (!ok) return
|
||||||
this.$message.success(this.$t(this.key('operation_success')))
|
this.$message.success(this.$t(this.key('operation_success')))
|
||||||
|
this.pagination.current = Math.min(this.pagination.current, Math.ceil((this.pagination.total - 1) / this.pagination.size) || 1)
|
||||||
this.fetchData()
|
this.fetchData()
|
||||||
},
|
},
|
||||||
async handleExport () {
|
async handleExport () {
|
||||||
@@ -322,7 +289,5 @@ export default {
|
|||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.search-bar { padding: 10px 0; }
|
.search-bar { padding: 10px 0; }
|
||||||
.status-on { color: #67C23A; }
|
|
||||||
.status-off { color: #909399; }
|
|
||||||
/deep/ .el-form-item--mini.el-form-item { margin-bottom: 4px; }
|
/deep/ .el-form-item--mini.el-form-item { margin-bottom: 4px; }
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -38,18 +38,6 @@
|
|||||||
/>
|
/>
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item :label="$t(key('status'))">
|
|
||||||
<el-select
|
|
||||||
v-model="search.status"
|
|
||||||
:placeholder="$t(key('select_status'))"
|
|
||||||
clearable
|
|
||||||
style="width:140px"
|
|
||||||
@change="onSearch"
|
|
||||||
>
|
|
||||||
<el-option value="1" :label="$t(key('enabled'))" />
|
|
||||||
<el-option value="0" :label="$t(key('disabled'))" />
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
<el-form-item>
|
||||||
<el-button type="primary" icon="el-icon-search" @click="onSearch">
|
<el-button type="primary" icon="el-icon-search" @click="onSearch">
|
||||||
{{ $t(key('search')) }}
|
{{ $t(key('search')) }}
|
||||||
@@ -76,10 +64,6 @@
|
|||||||
@page-change="onPageChange"
|
@page-change="onPageChange"
|
||||||
@selection-change="onSelect"
|
@selection-change="onSelect"
|
||||||
>
|
>
|
||||||
<template #col-status="{ row }">
|
|
||||||
<span v-if="String(row.status) === '1'" class="status-on"><i class="el-icon-circle-check" /> {{ $t(key('enabled')) }}</span>
|
|
||||||
<span v-else class="status-off"><i class="el-icon-circle-close" /> {{ $t(key('disabled')) }}</span>
|
|
||||||
</template>
|
|
||||||
</page-table>
|
</page-table>
|
||||||
|
|
||||||
<page-dialog-form
|
<page-dialog-form
|
||||||
@@ -129,14 +113,10 @@ export default {
|
|||||||
dialogTitle: '',
|
dialogTitle: '',
|
||||||
editId: '',
|
editId: '',
|
||||||
handleType: 'create',
|
handleType: 'create',
|
||||||
search: { code: '', name: '', area_id: '', status: '' },
|
search: { code: '', name: '', area_id: '' },
|
||||||
pagination: { current: 1, size: 10, total: 0 },
|
pagination: { current: 1, size: 10, total: 0 },
|
||||||
areaOptions: [],
|
areaOptions: [],
|
||||||
statusOptions: [
|
formData: { code: '', name: '', area_id: '', remark: '' },
|
||||||
{ value: '1', label: this.$t(this.key('enabled')) },
|
|
||||||
{ value: '0', label: this.$t(this.key('disabled')) }
|
|
||||||
],
|
|
||||||
formData: { code: '', name: '', area_id: '', status: '1', remark: '' },
|
|
||||||
rules: {
|
rules: {
|
||||||
code: [
|
code: [
|
||||||
{ required: true, message: this.key('enter_code'), trigger: 'blur' },
|
{ required: true, message: this.key('enter_code'), trigger: 'blur' },
|
||||||
@@ -149,9 +129,6 @@ export default {
|
|||||||
area_id: [
|
area_id: [
|
||||||
{ required: true, message: this.key('select_area'), trigger: 'change' }
|
{ required: true, message: this.key('select_area'), trigger: 'change' }
|
||||||
],
|
],
|
||||||
status: [
|
|
||||||
{ required: true, message: this.key('select_status'), trigger: 'change' }
|
|
||||||
],
|
|
||||||
remark: [
|
remark: [
|
||||||
{ max: 500, message: this.key('remark_max_500'), trigger: 'blur' }
|
{ max: 500, message: this.key('remark_max_500'), trigger: 'blur' }
|
||||||
]
|
]
|
||||||
@@ -163,7 +140,6 @@ export default {
|
|||||||
[{ type: 'input', prop: 'code', label: this.key('code'), placeholder: this.key('enter_code'), clearable: true, style: { width: '90%' } }],
|
[{ type: 'input', prop: 'code', label: this.key('code'), placeholder: this.key('enter_code'), clearable: true, style: { width: '90%' } }],
|
||||||
[{ type: 'input', prop: 'name', label: this.key('name'), placeholder: this.key('enter_name'), clearable: true, style: { width: '90%' } }],
|
[{ type: 'input', prop: 'name', label: this.key('name'), placeholder: this.key('enter_name'), clearable: true, style: { width: '90%' } }],
|
||||||
[{ type: 'select', prop: 'area_id', label: this.key('area'), placeholder: this.key('select_area'), clearable: true, filterable: true, style: { width: '90%' }, options: [] }],
|
[{ type: 'select', prop: 'area_id', label: this.key('area'), placeholder: this.key('select_area'), clearable: true, filterable: true, style: { width: '90%' }, options: [] }],
|
||||||
[{ type: 'select', prop: 'status', label: this.key('status'), placeholder: this.key('select_status'), clearable: false, style: { width: '90%' }, options: [] }],
|
|
||||||
[{ type: 'input', prop: 'remark', inputType: 'textarea', autosize: { minRows: 2, maxRows: 6 }, label: this.key('remark'), placeholder: this.key('enter_remark'), clearable: true, style: { width: '90%' } }]
|
[{ type: 'input', prop: 'remark', inputType: 'textarea', autosize: { minRows: 2, maxRows: 6 }, label: this.key('remark'), placeholder: this.key('enter_remark'), clearable: true, style: { width: '90%' } }]
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
@@ -172,18 +148,15 @@ export default {
|
|||||||
dialogFormCols () {
|
dialogFormCols () {
|
||||||
const cols = JSON.parse(JSON.stringify(this.baseFormCols))
|
const cols = JSON.parse(JSON.stringify(this.baseFormCols))
|
||||||
cols[2][0].options = this.areaOptions
|
cols[2][0].options = this.areaOptions
|
||||||
cols[3][0].options = this.statusOptions
|
|
||||||
return cols
|
return cols
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created () {
|
created () {
|
||||||
this.initAreaOptions()
|
this.initAreaOptions()
|
||||||
this.columns = useTableColumns([
|
this.columns = useTableColumns([
|
||||||
{ prop: 'sort', label: this.key('sort'), width: 80 },
|
|
||||||
{ prop: 'code', label: this.key('code'), minWidth: 120 },
|
{ prop: 'code', label: this.key('code'), minWidth: 120 },
|
||||||
{ prop: 'name', label: this.key('name'), minWidth: 120 },
|
{ prop: 'name', label: this.key('name'), minWidth: 120 },
|
||||||
{ prop: 'area_name', label: this.key('area_name'), minWidth: 120 },
|
{ prop: 'area_name', label: this.key('area_name'), minWidth: 120 },
|
||||||
{ prop: 'status', label: this.key('status'), slot: 'status', width: 110 },
|
|
||||||
{ prop: 'remark', label: this.key('remark') },
|
{ prop: 'remark', label: this.key('remark') },
|
||||||
{ prop: '_actions', label: this.key('operation'), width: 160, fixed: 'right' }
|
{ prop: '_actions', label: this.key('operation'), width: 160, fixed: 'right' }
|
||||||
])
|
])
|
||||||
@@ -203,11 +176,22 @@ export default {
|
|||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
normalizeResponse (res) {
|
normalizeResponse (res) {
|
||||||
const data = res && res.data !== undefined ? res.data : res
|
const getTotal = (source, fallback) => {
|
||||||
if (Array.isArray(data)) return { list: data, total: data.length }
|
if (!source) return fallback
|
||||||
if (data && Array.isArray(data.list)) return { list: data.list, total: Number(data.count || data.total || data.list.length) }
|
const total = source.count ?? source.total ?? source.total_count ?? source.record_count
|
||||||
if (data && Array.isArray(data.data)) return { list: data.data, total: Number(data.count || data.total || data.data.length) }
|
const value = Number(total)
|
||||||
if (data && data.data && Array.isArray(data.data.data)) return { list: data.data.data, total: Number(data.data.count || data.data.total || data.data.data.length) }
|
return Number.isNaN(value) ? fallback : value
|
||||||
|
}
|
||||||
|
const containers = [res, res && res.data, res && res.data && res.data.data].filter(Boolean)
|
||||||
|
for (const item of containers) {
|
||||||
|
if (Array.isArray(item)) {
|
||||||
|
return { list: item, total: getTotal(res, item.length) }
|
||||||
|
}
|
||||||
|
const list = item.data || item.list || item.rows || item.records || item.items
|
||||||
|
if (Array.isArray(list)) {
|
||||||
|
return { list, total: getTotal(item, getTotal(res, list.length)) }
|
||||||
|
}
|
||||||
|
}
|
||||||
return { list: [], total: 0 }
|
return { list: [], total: 0 }
|
||||||
},
|
},
|
||||||
async initAreaOptions () {
|
async initAreaOptions () {
|
||||||
@@ -233,7 +217,7 @@ export default {
|
|||||||
this.fetchData()
|
this.fetchData()
|
||||||
},
|
},
|
||||||
onReset () {
|
onReset () {
|
||||||
this.search = { code: '', name: '', area_id: '', status: '' }
|
this.search = { code: '', name: '', area_id: '' }
|
||||||
this.pagination.current = 1
|
this.pagination.current = 1
|
||||||
this.fetchData()
|
this.fetchData()
|
||||||
},
|
},
|
||||||
@@ -246,7 +230,7 @@ export default {
|
|||||||
this.selectedRows = rows
|
this.selectedRows = rows
|
||||||
},
|
},
|
||||||
resetForm () {
|
resetForm () {
|
||||||
this.formData = { code: '', name: '', area_id: '', status: '1', remark: '' }
|
this.formData = { code: '', name: '', area_id: '', remark: '' }
|
||||||
this.editId = ''
|
this.editId = ''
|
||||||
},
|
},
|
||||||
openAdd () {
|
openAdd () {
|
||||||
@@ -262,7 +246,7 @@ export default {
|
|||||||
this.handleType = 'edit'
|
this.handleType = 'edit'
|
||||||
this.dialogTitle = this.key('edit_title')
|
this.dialogTitle = this.key('edit_title')
|
||||||
this.editId = row.id
|
this.editId = row.id
|
||||||
this.formData = { code: row.code, name: row.name, area_id: row.area_id, status: row.status !== undefined ? String(row.status) : '1', remark: row.remark || '' }
|
this.formData = { code: row.code, name: row.name, area_id: row.area_id, remark: row.remark || '' }
|
||||||
this.dialogVisible = true
|
this.dialogVisible = true
|
||||||
},
|
},
|
||||||
async onDialogSubmit () {
|
async onDialogSubmit () {
|
||||||
@@ -306,7 +290,5 @@ export default {
|
|||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.search-bar { padding: 10px 0; }
|
.search-bar { padding: 10px 0; }
|
||||||
.status-on { color: #67C23A; }
|
|
||||||
.status-off { color: #909399; }
|
|
||||||
/deep/ .el-form-item--mini.el-form-item { margin-bottom: 4px; }
|
/deep/ .el-form-item--mini.el-form-item { margin-bottom: 4px; }
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -148,7 +148,6 @@ export default {
|
|||||||
},
|
},
|
||||||
created () {
|
created () {
|
||||||
this.columns = useTableColumns([
|
this.columns = useTableColumns([
|
||||||
{ prop: 'sort', label: this.key('sort'), width: 80 },
|
|
||||||
{ prop: 'code', label: this.key('code'), minWidth: 120 },
|
{ prop: 'code', label: this.key('code'), minWidth: 120 },
|
||||||
{ prop: 'name', label: this.key('name'), minWidth: 120 },
|
{ prop: 'name', label: this.key('name'), minWidth: 120 },
|
||||||
{ prop: 'remark', label: this.key('remark') },
|
{ prop: 'remark', label: this.key('remark') },
|
||||||
|
|||||||
@@ -314,7 +314,6 @@ export default {
|
|||||||
this.columns = useTableColumns([
|
this.columns = useTableColumns([
|
||||||
{ prop: 'up', label: '', slot: 'up', width: 40 },
|
{ prop: 'up', label: '', slot: 'up', width: 40 },
|
||||||
{ prop: 'down', label: '', slot: 'down', width: 40 },
|
{ prop: 'down', label: '', slot: 'down', width: 40 },
|
||||||
{ prop: 'sort', label: this.key('sort'), slot: 'sort', width: 80 },
|
|
||||||
{ prop: 'code', label: this.key('step_code'), minWidth: 120 },
|
{ prop: 'code', label: this.key('step_code'), minWidth: 120 },
|
||||||
{ prop: 'name', label: this.key('step_name'), minWidth: 140 },
|
{ prop: 'name', label: this.key('step_name'), minWidth: 140 },
|
||||||
{ prop: 'workingsubclass_name', label: this.key('process_unit_name'), minWidth: 140 },
|
{ prop: 'workingsubclass_name', label: this.key('process_unit_name'), minWidth: 140 },
|
||||||
|
|||||||
@@ -228,7 +228,6 @@ export default {
|
|||||||
},
|
},
|
||||||
created () {
|
created () {
|
||||||
this.columns = useTableColumns([
|
this.columns = useTableColumns([
|
||||||
{ prop: 'sort', label: this.key('sort'), width: 80 },
|
|
||||||
{ prop: 'code', label: this.key('code'), minWidth: 120 },
|
{ prop: 'code', label: this.key('code'), minWidth: 120 },
|
||||||
{ prop: 'name', label: this.key('name'), minWidth: 140 },
|
{ prop: 'name', label: this.key('name'), minWidth: 140 },
|
||||||
{ prop: 'flow_category_name', label: this.key('category'), minWidth: 120 },
|
{ prop: 'flow_category_name', label: this.key('category'), minWidth: 120 },
|
||||||
|
|||||||
@@ -195,7 +195,6 @@ export default {
|
|||||||
},
|
},
|
||||||
created () {
|
created () {
|
||||||
this.columns = useTableColumns([
|
this.columns = useTableColumns([
|
||||||
{ prop: 'sort ', label: this.key('sort'), width: 80 },
|
|
||||||
{ prop: 'code', label: this.key('process_unit_code'), minWidth: 120 },
|
{ prop: 'code', label: this.key('process_unit_code'), minWidth: 120 },
|
||||||
{ prop: 'name', label: this.key('process_unit_name'), minWidth: 120 },
|
{ prop: 'name', label: this.key('process_unit_name'), minWidth: 120 },
|
||||||
{ prop: 'device_category_name', label: this.key('device_category'), minWidth: 120 },
|
{ prop: 'device_category_name', label: this.key('device_category'), minWidth: 120 },
|
||||||
|
|||||||
@@ -14,9 +14,9 @@
|
|||||||
>
|
>
|
||||||
<el-option
|
<el-option
|
||||||
v-for="item in deviceCategoryOptions"
|
v-for="item in deviceCategoryOptions"
|
||||||
:key="item.id"
|
:key="item.value"
|
||||||
:label="item.name"
|
:label="item.label"
|
||||||
:value="item.id"
|
:value="item.value"
|
||||||
/>
|
/>
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
@@ -74,7 +74,11 @@
|
|||||||
auto-height
|
auto-height
|
||||||
@page-change="onPageChange"
|
@page-change="onPageChange"
|
||||||
@selection-change="onSelect"
|
@selection-change="onSelect"
|
||||||
/>
|
>
|
||||||
|
<template #col-type="{ row }">
|
||||||
|
<span>{{ typeText(row.type) }}</span>
|
||||||
|
</template>
|
||||||
|
</page-table>
|
||||||
|
|
||||||
<page-dialog-form
|
<page-dialog-form
|
||||||
ref="dialogForm"
|
ref="dialogForm"
|
||||||
@@ -168,7 +172,6 @@ export default {
|
|||||||
clearable: true,
|
clearable: true,
|
||||||
style: { width: '90%' },
|
style: { width: '90%' },
|
||||||
options: [],
|
options: [],
|
||||||
keys: { label: 'name', value: 'id' },
|
|
||||||
onFocus: this.onFormDeviceCategoryFocus
|
onFocus: this.onFormDeviceCategoryFocus
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
@@ -181,10 +184,9 @@ export default {
|
|||||||
clearable: true,
|
clearable: true,
|
||||||
style: { width: '90%' },
|
style: { width: '90%' },
|
||||||
options: [
|
options: [
|
||||||
{ name: this.key('type_error'), code: 'ERR' },
|
{ label: 'ERR', value: 'ERR' },
|
||||||
{ name: this.key('type_ng'), code: 'NG' }
|
{ label: 'NG', value: 'NG' }
|
||||||
],
|
]
|
||||||
keys: { label: 'name', value: 'code' }
|
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
[
|
[
|
||||||
@@ -222,9 +224,8 @@ export default {
|
|||||||
]
|
]
|
||||||
|
|
||||||
this.columns = useTableColumns([
|
this.columns = useTableColumns([
|
||||||
{ type: 'selection', width: 55 },
|
|
||||||
{ prop: 'device_category_name', label: this.key('device_category'), minWidth: 140 },
|
{ prop: 'device_category_name', label: this.key('device_category'), minWidth: 140 },
|
||||||
{ prop: 'type', label: this.key('exception_ng_category'), minWidth: 120 },
|
{ prop: 'type', label: this.key('exception_ng_category'), minWidth: 120, slot: 'type' },
|
||||||
{ prop: 'number', label: this.key('ng_code'), minWidth: 140 },
|
{ prop: 'number', label: this.key('ng_code'), minWidth: 140 },
|
||||||
{ prop: 'explain', label: this.key('ng_name'), minWidth: 140 },
|
{ prop: 'explain', label: this.key('ng_name'), minWidth: 140 },
|
||||||
{ prop: 'note', label: this.key('remark'), minWidth: 200 },
|
{ prop: 'note', label: this.key('remark'), minWidth: 200 },
|
||||||
@@ -286,9 +287,45 @@ export default {
|
|||||||
}, this.$permission)
|
}, this.$permission)
|
||||||
this.toolbarButtons = btns.toolbarButtons
|
this.toolbarButtons = btns.toolbarButtons
|
||||||
this.rowButtons = btns.rowButtons
|
this.rowButtons = btns.rowButtons
|
||||||
|
this.loadDeviceCategories().then(() => {
|
||||||
this.fetchData()
|
this.fetchData()
|
||||||
|
})
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
normalizeResponse (res) {
|
||||||
|
const root = res || {}
|
||||||
|
const data = res && res.data !== undefined ? res.data : res
|
||||||
|
if (Array.isArray(data)) return { list: data, total: Number(root.count || root.total || data.length) }
|
||||||
|
if (data && Array.isArray(data.list)) return { list: data.list, total: Number(root.count || root.total || data.count || data.total || data.list.length) }
|
||||||
|
if (data && Array.isArray(data.rows)) return { list: data.rows, total: Number(root.count || root.total || data.count || data.total || data.rows.length) }
|
||||||
|
if (data && Array.isArray(data.records)) return { list: data.records, total: Number(root.count || root.total || data.count || data.total || data.records.length) }
|
||||||
|
if (data && Array.isArray(data.data)) return { list: data.data, total: Number(root.count || root.total || data.count || data.total || data.data.length) }
|
||||||
|
if (data && data.data && Array.isArray(data.data.data)) return { list: data.data.data, total: Number(root.count || root.total || data.count || data.total || data.data.count || data.data.total || data.data.data.length) }
|
||||||
|
if (data && data.data && Array.isArray(data.data.list)) return { list: data.data.list, total: Number(root.count || root.total || data.count || data.total || data.data.count || data.data.total || data.data.list.length) }
|
||||||
|
return { list: [], total: 0 }
|
||||||
|
},
|
||||||
|
normalizeRow (row) {
|
||||||
|
const deviceCategory = typeof row.device_category === 'object'
|
||||||
|
? row.device_category
|
||||||
|
: (typeof row.category === 'object' ? row.category : {})
|
||||||
|
const option = this.deviceCategoryOptions.find(item => String(item.value) === String(row.device_category_id || deviceCategory.id || ''))
|
||||||
|
return {
|
||||||
|
...row,
|
||||||
|
device_category_id: row.device_category_id || deviceCategory.id || '',
|
||||||
|
device_category_name: row.device_category_name || deviceCategory.name || row.category_name || (option && option.label) || (typeof row.device_category === 'string' ? row.device_category : '')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
normalizeOptions (res) {
|
||||||
|
return this.normalizeResponse(res).list.map(item => ({
|
||||||
|
label: item.name || item.label || item.code || item.id,
|
||||||
|
value: item.id !== undefined ? item.id : item.value
|
||||||
|
})).filter(item => item.value !== undefined && item.value !== null && item.value !== '')
|
||||||
|
},
|
||||||
|
typeText (type) {
|
||||||
|
if (type === 'ERR') return this.$t(this.key('type_error'))
|
||||||
|
if (type === 'NG') return this.$t(this.key('type_ng'))
|
||||||
|
return type
|
||||||
|
},
|
||||||
async fetchData () {
|
async fetchData () {
|
||||||
this.loading = true
|
this.loading = true
|
||||||
try {
|
try {
|
||||||
@@ -297,11 +334,9 @@ export default {
|
|||||||
page_no: this.pagination.current,
|
page_no: this.pagination.current,
|
||||||
page_size: this.pagination.size
|
page_size: this.pagination.size
|
||||||
})
|
})
|
||||||
const data = Array.isArray(res) ? res : (res.data || {})
|
const data = this.normalizeResponse(res)
|
||||||
const list = Array.isArray(data) ? data : (data.data || [])
|
this.tableData = data.list.map(this.normalizeRow)
|
||||||
const total = Array.isArray(data) ? data.length : (data.count || 0)
|
this.pagination.total = data.total
|
||||||
this.tableData = list
|
|
||||||
this.pagination.total = total
|
|
||||||
} finally {
|
} finally {
|
||||||
this.loading = false
|
this.loading = false
|
||||||
}
|
}
|
||||||
@@ -327,8 +362,7 @@ export default {
|
|||||||
if (this.deviceCategoryOptions.length) return
|
if (this.deviceCategoryOptions.length) return
|
||||||
try {
|
try {
|
||||||
const res = await getDeviceCategoryAll({})
|
const res = await getDeviceCategoryAll({})
|
||||||
const list = Array.isArray(res) ? res : (res.data || [])
|
this.deviceCategoryOptions = this.normalizeOptions(res)
|
||||||
this.deviceCategoryOptions = Array.isArray(list) ? list : []
|
|
||||||
this.searchFormDeviceCategoryUpdate()
|
this.searchFormDeviceCategoryUpdate()
|
||||||
} catch { /* ignore */ }
|
} catch { /* ignore */ }
|
||||||
},
|
},
|
||||||
@@ -349,18 +383,18 @@ export default {
|
|||||||
openAdd () {
|
openAdd () {
|
||||||
this.handleType = 'create'
|
this.handleType = 'create'
|
||||||
this.dialogTitle = this.key('add_exception_ng_category')
|
this.dialogTitle = this.key('add_exception_ng_category')
|
||||||
this.loadDeviceCategories()
|
this.loadDeviceCategories().then(() => {
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.$refs.dialogForm && this.$refs.dialogForm.reset()
|
this.$refs.dialogForm && this.$refs.dialogForm.reset()
|
||||||
this.resetForm()
|
this.resetForm()
|
||||||
this.dialogVisible = true
|
this.dialogVisible = true
|
||||||
})
|
})
|
||||||
|
})
|
||||||
},
|
},
|
||||||
openEdit (row) {
|
openEdit (row) {
|
||||||
this.handleType = 'edit'
|
this.handleType = 'edit'
|
||||||
this.dialogTitle = this.key('edit_exception_ng_category')
|
this.dialogTitle = this.key('edit_exception_ng_category')
|
||||||
this.editId = row.id
|
this.editId = row.id
|
||||||
this.loadDeviceCategories()
|
|
||||||
this.formData = {
|
this.formData = {
|
||||||
device_category_id: row.device_category_id || '',
|
device_category_id: row.device_category_id || '',
|
||||||
type: row.type || '',
|
type: row.type || '',
|
||||||
@@ -368,7 +402,9 @@ export default {
|
|||||||
explain: row.explain || '',
|
explain: row.explain || '',
|
||||||
note: row.note || ''
|
note: row.note || ''
|
||||||
}
|
}
|
||||||
|
this.loadDeviceCategories().then(() => {
|
||||||
this.dialogVisible = true
|
this.dialogVisible = true
|
||||||
|
})
|
||||||
},
|
},
|
||||||
async onDialogSubmit () {
|
async onDialogSubmit () {
|
||||||
this.submitting = true
|
this.submitting = true
|
||||||
|
|||||||
@@ -3,43 +3,41 @@
|
|||||||
<template #header>
|
<template #header>
|
||||||
<div class="search-bar">
|
<div class="search-bar">
|
||||||
<el-form :inline="true" size="mini">
|
<el-form :inline="true" size="mini">
|
||||||
<el-form-item :label="$t(key('code'))">
|
<el-form-item :label="$t(key('result_param_code'))">
|
||||||
<el-input
|
<el-input
|
||||||
v-model="search.code"
|
v-model="search.result_param_code"
|
||||||
:placeholder="$t(key('enter_code'))"
|
:placeholder="$t(key('enter_result_param_code'))"
|
||||||
clearable
|
clearable
|
||||||
style="width:200px"
|
style="width:200px"
|
||||||
@keyup.enter.native="onSearch"
|
@keyup.enter.native="onSearch"
|
||||||
/>
|
/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item :label="$t(key('name'))">
|
<el-form-item :label="$t(key('result_param_name'))">
|
||||||
<el-input
|
<el-input
|
||||||
v-model="search.name"
|
v-model="search.result_param_name"
|
||||||
:placeholder="$t(key('enter_name'))"
|
:placeholder="$t(key('enter_result_param_name'))"
|
||||||
clearable
|
clearable
|
||||||
style="width:200px"
|
style="width:200px"
|
||||||
@keyup.enter.native="onSearch"
|
@keyup.enter.native="onSearch"
|
||||||
/>
|
/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item :label="$t(key('scada_node'))">
|
<el-form-item :label="$t(key('scada_node_code'))">
|
||||||
<el-input
|
<el-input
|
||||||
v-model="search.scada_node"
|
v-model="search.scada_node_code"
|
||||||
:placeholder="$t(key('enter_scada_node'))"
|
:placeholder="$t(key('enter_scada_node_code'))"
|
||||||
clearable
|
clearable
|
||||||
style="width:200px"
|
style="width:200px"
|
||||||
@keyup.enter.native="onSearch"
|
@keyup.enter.native="onSearch"
|
||||||
/>
|
/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item :label="$t(key('status'))">
|
<el-form-item :label="$t(key('scada_node_name'))">
|
||||||
<el-select
|
<el-input
|
||||||
v-model="search.status"
|
v-model="search.scada_node_name"
|
||||||
:placeholder="$t(key('select_status'))"
|
:placeholder="$t(key('enter_scada_node_name'))"
|
||||||
clearable
|
clearable
|
||||||
style="width:140px"
|
style="width:200px"
|
||||||
>
|
@keyup.enter.native="onSearch"
|
||||||
<el-option :value="1" :label="$t(key('enable'))" />
|
/>
|
||||||
<el-option :value="0" :label="$t(key('disable'))" />
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item>
|
<el-form-item>
|
||||||
<el-button type="primary" icon="el-icon-search" @click="onSearch">
|
<el-button type="primary" icon="el-icon-search" @click="onSearch">
|
||||||
@@ -66,7 +64,11 @@
|
|||||||
auto-height
|
auto-height
|
||||||
@page-change="onPageChange"
|
@page-change="onPageChange"
|
||||||
@selection-change="onSelect"
|
@selection-change="onSelect"
|
||||||
/>
|
>
|
||||||
|
<template #col-category="{ row }">
|
||||||
|
<span>{{ categoryText(row.category) }}</span>
|
||||||
|
</template>
|
||||||
|
</page-table>
|
||||||
|
|
||||||
<page-dialog-form
|
<page-dialog-form
|
||||||
ref="dialogForm"
|
ref="dialogForm"
|
||||||
@@ -97,6 +99,9 @@ import {
|
|||||||
editDataCollectionConfig,
|
editDataCollectionConfig,
|
||||||
deleteDataCollectionConfig
|
deleteDataCollectionConfig
|
||||||
} from '@/api/production-master-data/data-collection-configuration'
|
} from '@/api/production-master-data/data-collection-configuration'
|
||||||
|
import { getOptionalParamsList } from '@/api/production-master-data/optional-params'
|
||||||
|
import { getWorkingsubclassAll } from '@/api/production-master-data/process-step'
|
||||||
|
import { getQueryCodes } from '@/api/scada-manage/edge-manager'
|
||||||
import PageTable from '@/components/page-table'
|
import PageTable from '@/components/page-table'
|
||||||
import PageDialogForm from '@/components/page-dialog-form'
|
import PageDialogForm from '@/components/page-dialog-form'
|
||||||
|
|
||||||
@@ -117,140 +122,57 @@ export default {
|
|||||||
dialogTitle: '',
|
dialogTitle: '',
|
||||||
editId: '',
|
editId: '',
|
||||||
handleType: 'create',
|
handleType: 'create',
|
||||||
search: { code: '', name: '', scada_node: '', status: '' },
|
search: {
|
||||||
|
result_param_code: undefined,
|
||||||
|
result_param_name: undefined,
|
||||||
|
scada_node_code: undefined,
|
||||||
|
scada_node_name: undefined
|
||||||
|
},
|
||||||
pagination: { current: 1, size: 10, total: 0 },
|
pagination: { current: 1, size: 10, total: 0 },
|
||||||
|
workingSubclassOptions: [],
|
||||||
|
workingSubclassRawData: [],
|
||||||
|
resultParamOptions: [],
|
||||||
|
scadaNodeOptions: [],
|
||||||
formData: {
|
formData: {
|
||||||
code: '',
|
working_subclass_id: undefined,
|
||||||
name: '',
|
category: undefined,
|
||||||
scada_node: '',
|
result_param_code: undefined,
|
||||||
collect_type: '',
|
scada_node_code: undefined,
|
||||||
interval: 1,
|
result_param_type: 1
|
||||||
status: 1,
|
|
||||||
remark: ''
|
|
||||||
},
|
},
|
||||||
rules: {
|
rules: {
|
||||||
code: [
|
working_subclass_id: [
|
||||||
{ required: true, message: this.key('enter_code'), trigger: 'blur' },
|
{ required: true, message: this.key('select_working_subclass'), trigger: 'change' }
|
||||||
{ min: 1, max: 100, message: this.key('remark_length'), trigger: 'blur' }
|
|
||||||
],
|
],
|
||||||
name: [
|
category: [
|
||||||
{ required: true, message: this.key('enter_name'), trigger: 'blur' },
|
{ required: true, message: this.key('select_data_type'), trigger: 'change' }
|
||||||
{ min: 1, max: 100, message: this.key('remark_length'), trigger: 'blur' }
|
|
||||||
],
|
],
|
||||||
scada_node: [
|
result_param_code: [
|
||||||
{ required: true, message: this.key('enter_scada_node'), trigger: 'blur' }
|
{ required: true, message: this.key('select_result_param'), trigger: 'change' }
|
||||||
],
|
],
|
||||||
collect_type: [
|
scada_node_code: [
|
||||||
{ required: true, message: this.key('select_collect_type'), trigger: 'change' }
|
{ required: true, message: this.key('select_scada_node'), trigger: 'change' }
|
||||||
],
|
],
|
||||||
interval: [
|
result_param_type: [
|
||||||
{ required: true, message: this.key('enter_interval'), trigger: 'blur' }
|
{ required: true, message: this.key('select_data_type'), trigger: 'change' }
|
||||||
],
|
|
||||||
status: [
|
|
||||||
{ required: true, message: this.key('select_status'), trigger: 'change' }
|
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
columns: [],
|
columns: [],
|
||||||
toolbarButtons: [],
|
toolbarButtons: [],
|
||||||
rowButtons: [],
|
rowButtons: [],
|
||||||
formCols: [
|
formCols: []
|
||||||
[
|
|
||||||
{
|
|
||||||
type: 'input',
|
|
||||||
prop: 'code',
|
|
||||||
label: this.key('code'),
|
|
||||||
placeholder: this.key('enter_code'),
|
|
||||||
clearable: true,
|
|
||||||
style: { width: '90%' }
|
|
||||||
}
|
|
||||||
],
|
|
||||||
[
|
|
||||||
{
|
|
||||||
type: 'input',
|
|
||||||
prop: 'name',
|
|
||||||
label: this.key('name'),
|
|
||||||
placeholder: this.key('enter_name'),
|
|
||||||
clearable: true,
|
|
||||||
style: { width: '90%' }
|
|
||||||
}
|
|
||||||
],
|
|
||||||
[
|
|
||||||
{
|
|
||||||
type: 'input',
|
|
||||||
prop: 'scada_node',
|
|
||||||
label: this.key('scada_node'),
|
|
||||||
placeholder: this.key('enter_scada_node'),
|
|
||||||
clearable: true,
|
|
||||||
style: { width: '90%' }
|
|
||||||
}
|
|
||||||
],
|
|
||||||
[
|
|
||||||
{
|
|
||||||
type: 'select',
|
|
||||||
prop: 'collect_type',
|
|
||||||
label: this.key('collect_type'),
|
|
||||||
placeholder: this.key('select_collect_type'),
|
|
||||||
clearable: true,
|
|
||||||
filterable: true,
|
|
||||||
style: { width: '90%' },
|
|
||||||
options: [
|
|
||||||
{ label: this.key('real_time'), value: 'real_time' },
|
|
||||||
{ label: this.key('periodic'), value: 'periodic' },
|
|
||||||
{ label: this.key('trigger'), value: 'trigger' }
|
|
||||||
]
|
|
||||||
}
|
|
||||||
],
|
|
||||||
[
|
|
||||||
{
|
|
||||||
type: 'input',
|
|
||||||
prop: 'interval',
|
|
||||||
inputType: 'number',
|
|
||||||
label: this.key('interval'),
|
|
||||||
placeholder: this.key('enter_interval'),
|
|
||||||
clearable: true,
|
|
||||||
style: { width: '90%' }
|
|
||||||
}
|
|
||||||
],
|
|
||||||
[
|
|
||||||
{
|
|
||||||
type: 'select',
|
|
||||||
prop: 'status',
|
|
||||||
label: this.key('status'),
|
|
||||||
placeholder: this.key('select_status'),
|
|
||||||
clearable: true,
|
|
||||||
filterable: true,
|
|
||||||
style: { width: '90%' },
|
|
||||||
options: [
|
|
||||||
{ label: this.key('enable'), value: 1 },
|
|
||||||
{ label: this.key('disable'), value: 0 }
|
|
||||||
]
|
|
||||||
}
|
|
||||||
],
|
|
||||||
[
|
|
||||||
{
|
|
||||||
type: 'input',
|
|
||||||
prop: 'remark',
|
|
||||||
inputType: 'textarea',
|
|
||||||
autosize: { minRows: 2, maxRows: 6 },
|
|
||||||
label: this.key('remark'),
|
|
||||||
placeholder: this.key('enter_remark'),
|
|
||||||
clearable: true,
|
|
||||||
style: { width: '90%' }
|
|
||||||
}
|
|
||||||
]
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created () {
|
created () {
|
||||||
this.columns = useTableColumns([
|
this.columns = useTableColumns([
|
||||||
{ prop: 'sort', label: this.key('sort'), width: 80 },
|
{ prop: 'working_subclass', label: this.key('working_subclass'), minWidth: 140 },
|
||||||
{ prop: 'code', label: this.key('code'), minWidth: 120 },
|
{ prop: 'result_param_name', label: this.key('result_param_name'), minWidth: 160 },
|
||||||
{ prop: 'name', label: this.key('name'), minWidth: 140 },
|
{ prop: 'result_param_code', label: this.key('result_param_code'), minWidth: 160 },
|
||||||
{ prop: 'scada_node', label: this.key('scada_node'), minWidth: 140 },
|
{ prop: 'scada_node_name', label: this.key('scada_node_name'), minWidth: 160 },
|
||||||
{ prop: 'collect_type_name', label: this.key('collect_type'), minWidth: 120 },
|
{ prop: 'scada_node_code', label: this.key('scada_node_code'), minWidth: 160 },
|
||||||
{ prop: 'interval', label: this.key('interval'), width: 100 },
|
{ prop: 'category', label: this.key('category'), minWidth: 140, slot: 'category' },
|
||||||
{ prop: 'status_name', label: this.key('status'), width: 100, slot: true },
|
{ prop: 'create_time', label: this.key('create_time'), minWidth: 160 },
|
||||||
{ prop: 'remark', label: this.key('remark'), minWidth: 120 },
|
{ prop: 'update_data', label: this.key('update_data'), minWidth: 160 },
|
||||||
{ prop: '_actions', label: this.key('operation'), width: 160, fixed: 'right' }
|
{ prop: '_actions', label: this.key('operation'), width: 160, fixed: 'right' }
|
||||||
])
|
])
|
||||||
const btns = useTableButtons({
|
const btns = useTableButtons({
|
||||||
@@ -260,7 +182,7 @@ export default {
|
|||||||
label: this.key('add'),
|
label: this.key('add'),
|
||||||
icon: 'el-icon-plus',
|
icon: 'el-icon-plus',
|
||||||
type: 'primary',
|
type: 'primary',
|
||||||
auth: '/production_configuration/spc_configuration/binding_scada_node/create',
|
auth: '/production_configuration/matetial_model/bom/create',
|
||||||
onClick: this.openAdd
|
onClick: this.openAdd
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
@@ -269,7 +191,7 @@ export default {
|
|||||||
key: 'edit',
|
key: 'edit',
|
||||||
label: this.key('edit'),
|
label: this.key('edit'),
|
||||||
icon: 'el-icon-edit',
|
icon: 'el-icon-edit',
|
||||||
auth: '/production_configuration/spc_configuration/binding_scada_node/edit',
|
auth: '/production_configuration/matetial_model/bom/edit',
|
||||||
onClick: this.openEdit
|
onClick: this.openEdit
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@@ -277,13 +199,15 @@ export default {
|
|||||||
label: this.key('delete'),
|
label: this.key('delete'),
|
||||||
icon: 'el-icon-delete',
|
icon: 'el-icon-delete',
|
||||||
color: 'danger',
|
color: 'danger',
|
||||||
auth: '/production_configuration/spc_configuration/binding_scada_node/delete',
|
auth: '/production_configuration/matetial_model/bom/delete',
|
||||||
onClick: this.handleDelete
|
onClick: this.handleDelete
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}, this.$permission)
|
}, this.$permission)
|
||||||
this.toolbarButtons = btns.toolbarButtons
|
this.toolbarButtons = btns.toolbarButtons
|
||||||
this.rowButtons = btns.rowButtons
|
this.rowButtons = btns.rowButtons
|
||||||
|
this.formCols = this.makeFormCols()
|
||||||
|
this.loadWorkingSubclassOptions()
|
||||||
this.fetchData()
|
this.fetchData()
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
@@ -295,20 +219,233 @@ export default {
|
|||||||
page_no: this.pagination.current,
|
page_no: this.pagination.current,
|
||||||
page_size: this.pagination.size
|
page_size: this.pagination.size
|
||||||
})
|
})
|
||||||
const list = Array.isArray(res) ? res : (res.data || [])
|
const data = this.normalizeResponse(res)
|
||||||
const total = Array.isArray(res) ? res.length : (res.count || 0)
|
this.tableData = data.list.map((row, index) => this.normalizeRow(row, index))
|
||||||
this.tableData = list
|
this.pagination.total = data.total
|
||||||
this.pagination.total = total
|
|
||||||
} finally {
|
} finally {
|
||||||
this.loading = false
|
this.loading = false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
normalizeResponse (res) {
|
||||||
|
if (Array.isArray(res)) {
|
||||||
|
return { list: res, total: res.length }
|
||||||
|
}
|
||||||
|
|
||||||
|
const containers = [
|
||||||
|
res,
|
||||||
|
res && res.data,
|
||||||
|
res && res.data && res.data.data
|
||||||
|
].filter(Boolean)
|
||||||
|
|
||||||
|
for (const item of containers) {
|
||||||
|
if (Array.isArray(item)) {
|
||||||
|
return {
|
||||||
|
list: item,
|
||||||
|
total: this.getTotal(res, item.length)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const list = item.data || item.list || item.rows || item.records || item.results || item.items
|
||||||
|
if (Array.isArray(list)) {
|
||||||
|
return {
|
||||||
|
list,
|
||||||
|
total: this.getTotal(item, this.getTotal(res, list.length))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return { list: [], total: 0 }
|
||||||
|
},
|
||||||
|
getTotal (source, fallback) {
|
||||||
|
if (!source) return fallback
|
||||||
|
const total = source.count ?? source.total ?? source.total_count ?? source.record_count
|
||||||
|
const value = Number(total)
|
||||||
|
return Number.isNaN(value) ? fallback : value
|
||||||
|
},
|
||||||
|
firstValue (row, keys, defaultValue = '') {
|
||||||
|
if (!row) return defaultValue
|
||||||
|
for (const key of keys) {
|
||||||
|
const value = row[key]
|
||||||
|
if (value !== undefined && value !== null && value !== '') {
|
||||||
|
return value
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return defaultValue
|
||||||
|
},
|
||||||
|
makeFormCols () {
|
||||||
|
return [
|
||||||
|
[
|
||||||
|
{
|
||||||
|
type: 'select',
|
||||||
|
prop: 'working_subclass_id',
|
||||||
|
label: this.key('working_subclass'),
|
||||||
|
placeholder: this.key('select_working_subclass'),
|
||||||
|
clearable: true,
|
||||||
|
filterable: true,
|
||||||
|
style: { width: '90%' },
|
||||||
|
options: this.workingSubclassOptions,
|
||||||
|
onChange: this.onWorkingSubclassChange
|
||||||
|
}
|
||||||
|
],
|
||||||
|
[
|
||||||
|
{
|
||||||
|
type: 'select',
|
||||||
|
prop: 'category',
|
||||||
|
label: this.key('category'),
|
||||||
|
placeholder: this.key('select_data_type'),
|
||||||
|
clearable: true,
|
||||||
|
filterable: true,
|
||||||
|
style: { width: '90%' },
|
||||||
|
options: [
|
||||||
|
{ label: this.$t(this.key('process_inspection')), value: 'PROCESS_INSPECTION' },
|
||||||
|
{ label: this.$t(this.key('result_data')), value: 'RESULT_DATA' }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
[
|
||||||
|
{
|
||||||
|
type: 'select',
|
||||||
|
prop: 'result_param_code',
|
||||||
|
label: this.key('result_param'),
|
||||||
|
placeholder: this.key('select_result_param'),
|
||||||
|
clearable: true,
|
||||||
|
filterable: true,
|
||||||
|
style: { width: '90%' },
|
||||||
|
options: this.resultParamOptions
|
||||||
|
}
|
||||||
|
],
|
||||||
|
[
|
||||||
|
{
|
||||||
|
type: 'select',
|
||||||
|
prop: 'scada_node_code',
|
||||||
|
label: this.key('scada_node'),
|
||||||
|
placeholder: this.key('select_scada_node'),
|
||||||
|
clearable: true,
|
||||||
|
filterable: true,
|
||||||
|
style: { width: '90%' },
|
||||||
|
options: this.scadaNodeOptions
|
||||||
|
}
|
||||||
|
],
|
||||||
|
[
|
||||||
|
{
|
||||||
|
type: 'select',
|
||||||
|
prop: 'result_param_type',
|
||||||
|
label: this.key('result_param_type'),
|
||||||
|
placeholder: this.key('select_data_type'),
|
||||||
|
clearable: true,
|
||||||
|
filterable: true,
|
||||||
|
style: { width: '90%' },
|
||||||
|
options: [
|
||||||
|
{ label: this.$t(this.key('measurement_type')), value: 1 },
|
||||||
|
{ label: this.$t(this.key('count_type')), value: 2 }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
]
|
||||||
|
},
|
||||||
|
normalizeList (res) {
|
||||||
|
return this.normalizeResponse(res).list
|
||||||
|
},
|
||||||
|
categoryText (value) {
|
||||||
|
const map = {
|
||||||
|
PROCESS_INSPECTION: this.key('process_inspection'),
|
||||||
|
RESULT_DATA: this.key('result_data')
|
||||||
|
}
|
||||||
|
return map[value] ? this.$t(map[value]) : (value || '')
|
||||||
|
},
|
||||||
|
async loadWorkingSubclassOptions () {
|
||||||
|
try {
|
||||||
|
const res = await getWorkingsubclassAll()
|
||||||
|
const list = this.normalizeList(res)
|
||||||
|
this.workingSubclassRawData = list
|
||||||
|
this.workingSubclassOptions = list.map(item => ({
|
||||||
|
label: item.name || item.working_subclass_name || item.code,
|
||||||
|
value: item.id
|
||||||
|
}))
|
||||||
|
this.formCols = this.makeFormCols()
|
||||||
|
} catch (e) {
|
||||||
|
this.formCols = this.makeFormCols()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
findWorkingSubclassById (id) {
|
||||||
|
return this.workingSubclassRawData.find(item => item.id === id)
|
||||||
|
},
|
||||||
|
async onWorkingSubclassChange (value) {
|
||||||
|
this.formData.result_param_code = undefined
|
||||||
|
this.formData.scada_node_code = undefined
|
||||||
|
this.resultParamOptions = []
|
||||||
|
this.scadaNodeOptions = []
|
||||||
|
const workingSubclass = this.findWorkingSubclassById(value)
|
||||||
|
if (!workingSubclass) {
|
||||||
|
this.formCols = this.makeFormCols()
|
||||||
|
return
|
||||||
|
}
|
||||||
|
const code = workingSubclass.code || workingSubclass.working_subclass
|
||||||
|
await Promise.all([
|
||||||
|
this.loadResultParamOptions(value),
|
||||||
|
this.loadScadaNodeOptions(code)
|
||||||
|
])
|
||||||
|
this.formCols = this.makeFormCols()
|
||||||
|
},
|
||||||
|
async loadResultParamOptions (workingsubclassId) {
|
||||||
|
try {
|
||||||
|
const res = await getOptionalParamsList({
|
||||||
|
workingsubclass_id: workingsubclassId,
|
||||||
|
page_no: 1,
|
||||||
|
page_size: 10000
|
||||||
|
})
|
||||||
|
this.resultParamOptions = this.normalizeList(res).map(item => ({
|
||||||
|
label: item.name || item.result_param_name || item.code,
|
||||||
|
value: item.code || item.result_param_code
|
||||||
|
}))
|
||||||
|
} catch (e) {
|
||||||
|
this.resultParamOptions = []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
normalizeScadaNodeList (res, workingSubclassCode) {
|
||||||
|
const data = res && res.data ? res.data : res
|
||||||
|
if (Array.isArray(data)) return data
|
||||||
|
if (data && Array.isArray(data[workingSubclassCode])) return data[workingSubclassCode]
|
||||||
|
if (data && Array.isArray(data.data)) return data.data
|
||||||
|
return []
|
||||||
|
},
|
||||||
|
async loadScadaNodeOptions (workingSubclassCode) {
|
||||||
|
try {
|
||||||
|
const res = await getQueryCodes(workingSubclassCode)
|
||||||
|
const list = this.normalizeScadaNodeList(res, workingSubclassCode)
|
||||||
|
this.scadaNodeOptions = list.map(item => ({
|
||||||
|
label: item.name || item.scada_node_name || item.code,
|
||||||
|
value: item.code || item.scada_node_code
|
||||||
|
}))
|
||||||
|
} catch (e) {
|
||||||
|
this.scadaNodeOptions = []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
normalizeRow (row) {
|
||||||
|
return {
|
||||||
|
...row,
|
||||||
|
id: this.firstValue(row, ['id', 'binding_scada_node_id', 'config_id']),
|
||||||
|
working_subclass: this.firstValue(row, ['working_subclass', 'working_subclass_code', 'workingsubclass_code']),
|
||||||
|
working_subclass_id: this.firstValue(row, ['working_subclass_id', 'workingsubclass_id']),
|
||||||
|
result_param_name: this.firstValue(row, ['result_param_name', 'param_name', 'name']),
|
||||||
|
result_param_code: this.firstValue(row, ['result_param_code', 'param_code', 'code']),
|
||||||
|
scada_node_name: this.firstValue(row, ['scada_node_name', 'node_name']),
|
||||||
|
scada_node_code: this.firstValue(row, ['scada_node_code', 'node_code']),
|
||||||
|
category: this.firstValue(row, ['category', 'data_category']),
|
||||||
|
create_time: this.firstValue(row, ['create_time', 'created_at']),
|
||||||
|
update_data: this.firstValue(row, ['update_data', 'update_time', 'updated_at'])
|
||||||
|
}
|
||||||
|
},
|
||||||
onSearch () {
|
onSearch () {
|
||||||
this.pagination.current = 1
|
this.pagination.current = 1
|
||||||
this.fetchData()
|
this.fetchData()
|
||||||
},
|
},
|
||||||
onReset () {
|
onReset () {
|
||||||
this.search = { code: '', name: '', scada_node: '', status: '' }
|
this.search = {
|
||||||
|
result_param_code: undefined,
|
||||||
|
result_param_name: undefined,
|
||||||
|
scada_node_code: undefined,
|
||||||
|
scada_node_name: undefined
|
||||||
|
}
|
||||||
this.pagination.current = 1
|
this.pagination.current = 1
|
||||||
this.fetchData()
|
this.fetchData()
|
||||||
},
|
},
|
||||||
@@ -322,14 +459,15 @@ export default {
|
|||||||
},
|
},
|
||||||
resetForm () {
|
resetForm () {
|
||||||
this.formData = {
|
this.formData = {
|
||||||
code: '',
|
working_subclass_id: undefined,
|
||||||
name: '',
|
category: undefined,
|
||||||
scada_node: '',
|
result_param_code: undefined,
|
||||||
collect_type: '',
|
scada_node_code: undefined,
|
||||||
interval: 1,
|
result_param_type: 1
|
||||||
status: 1,
|
|
||||||
remark: ''
|
|
||||||
}
|
}
|
||||||
|
this.resultParamOptions = []
|
||||||
|
this.scadaNodeOptions = []
|
||||||
|
this.formCols = this.makeFormCols()
|
||||||
this.editId = ''
|
this.editId = ''
|
||||||
},
|
},
|
||||||
openAdd () {
|
openAdd () {
|
||||||
@@ -341,28 +479,64 @@ export default {
|
|||||||
this.dialogVisible = true
|
this.dialogVisible = true
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
openEdit (row) {
|
async openEdit (row) {
|
||||||
|
if (!this.workingSubclassRawData.length) {
|
||||||
|
await this.loadWorkingSubclassOptions()
|
||||||
|
}
|
||||||
|
const record = this.normalizeRow(row)
|
||||||
this.handleType = 'edit'
|
this.handleType = 'edit'
|
||||||
this.dialogTitle = this.key('edit_title')
|
this.dialogTitle = this.key('edit_title')
|
||||||
this.editId = row.id
|
this.editId = record.id
|
||||||
|
const workingSubclassId = record.working_subclass_id || this.getWorkingSubclassIdByCode(record.working_subclass)
|
||||||
this.formData = {
|
this.formData = {
|
||||||
code: row.code,
|
working_subclass_id: workingSubclassId,
|
||||||
name: row.name,
|
category: record.category,
|
||||||
scada_node: row.scada_node || '',
|
result_param_code: record.result_param_code,
|
||||||
collect_type: row.collect_type || '',
|
scada_node_code: record.scada_node_code,
|
||||||
interval: row.interval || 1,
|
result_param_type: record.result_param_type || 1
|
||||||
status: typeof row.status === 'number' ? row.status : 1,
|
|
||||||
remark: row.remark || ''
|
|
||||||
}
|
}
|
||||||
|
this.prepareEditOptions(workingSubclassId, record).finally(() => {
|
||||||
this.dialogVisible = true
|
this.dialogVisible = true
|
||||||
|
})
|
||||||
|
},
|
||||||
|
getWorkingSubclassIdByCode (code) {
|
||||||
|
const target = this.workingSubclassRawData.find(item => item.code === code || item.working_subclass === code)
|
||||||
|
return target && target.id
|
||||||
|
},
|
||||||
|
async prepareEditOptions (workingSubclassId, record) {
|
||||||
|
const workingSubclass = this.findWorkingSubclassById(workingSubclassId)
|
||||||
|
if (workingSubclass) {
|
||||||
|
await Promise.all([
|
||||||
|
this.loadResultParamOptions(workingSubclassId),
|
||||||
|
this.loadScadaNodeOptions(workingSubclass.code || workingSubclass.working_subclass)
|
||||||
|
])
|
||||||
|
}
|
||||||
|
if (record.result_param_code && !this.resultParamOptions.some(item => item.value === record.result_param_code)) {
|
||||||
|
this.resultParamOptions.push({ label: record.result_param_name || record.result_param_code, value: record.result_param_code })
|
||||||
|
}
|
||||||
|
if (record.scada_node_code && !this.scadaNodeOptions.some(item => item.value === record.scada_node_code)) {
|
||||||
|
this.scadaNodeOptions.push({ label: record.scada_node_name || record.scada_node_code, value: record.scada_node_code })
|
||||||
|
}
|
||||||
|
this.formCols = this.makeFormCols()
|
||||||
|
},
|
||||||
|
buildSubmitData () {
|
||||||
|
const workingSubclass = this.findWorkingSubclassById(this.formData.working_subclass_id)
|
||||||
|
const workingSubclassCode = workingSubclass && (workingSubclass.code || workingSubclass.working_subclass)
|
||||||
|
const scadaNode = this.scadaNodeOptions.find(item => item.value === this.formData.scada_node_code)
|
||||||
|
return {
|
||||||
|
...this.formData,
|
||||||
|
working_subclass: workingSubclassCode,
|
||||||
|
scada_node_name: scadaNode ? scadaNode.label : undefined
|
||||||
|
}
|
||||||
},
|
},
|
||||||
async onDialogSubmit () {
|
async onDialogSubmit () {
|
||||||
this.submitting = true
|
this.submitting = true
|
||||||
try {
|
try {
|
||||||
|
const submitData = this.buildSubmitData()
|
||||||
if (this.handleType === 'create') {
|
if (this.handleType === 'create') {
|
||||||
await createDataCollectionConfig(this.formData)
|
await createDataCollectionConfig(submitData)
|
||||||
} else {
|
} else {
|
||||||
await editDataCollectionConfig({ ...this.formData, id: this.editId })
|
await editDataCollectionConfig({ ...submitData, id: this.editId })
|
||||||
}
|
}
|
||||||
this.$message.success(this.$t(this.key('operation_success')))
|
this.$message.success(this.$t(this.key('operation_success')))
|
||||||
this.dialogVisible = false
|
this.dialogVisible = false
|
||||||
|
|||||||
@@ -21,6 +21,18 @@
|
|||||||
@keyup.enter.native="onSearch"
|
@keyup.enter.native="onSearch"
|
||||||
/>
|
/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
<el-form-item :label="$t(key('status'))">
|
||||||
|
<el-select
|
||||||
|
v-model="search.status"
|
||||||
|
:placeholder="$t(key('select_status'))"
|
||||||
|
clearable
|
||||||
|
style="width:140px"
|
||||||
|
@change="onSearch"
|
||||||
|
>
|
||||||
|
<el-option value="1" :label="$t(key('enable'))" />
|
||||||
|
<el-option value="0" :label="$t(key('disable'))" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
<el-form-item>
|
<el-form-item>
|
||||||
<el-button type="primary" icon="el-icon-search" @click="onSearch">
|
<el-button type="primary" icon="el-icon-search" @click="onSearch">
|
||||||
{{ $t(key('search')) }}
|
{{ $t(key('search')) }}
|
||||||
@@ -46,7 +58,7 @@
|
|||||||
@selection-change="onSelect"
|
@selection-change="onSelect"
|
||||||
>
|
>
|
||||||
<template #col-status="{ row }">
|
<template #col-status="{ row }">
|
||||||
<span v-if="row.status === 1" style="color: #67c23a;">
|
<span v-if="String(row.status) === '1'" style="color: #67c23a;">
|
||||||
<i class="el-icon-circle-check" />
|
<i class="el-icon-circle-check" />
|
||||||
{{ $t(key('enable')) }}
|
{{ $t(key('enable')) }}
|
||||||
</span>
|
</span>
|
||||||
@@ -79,7 +91,6 @@
|
|||||||
import { useTableColumns } from '@/composables/useTableColumns'
|
import { useTableColumns } from '@/composables/useTableColumns'
|
||||||
import { useTableButtons } from '@/composables/useTableButtons'
|
import { useTableButtons } from '@/composables/useTableButtons'
|
||||||
import { i18nMixin } from '@/composables/useI18n'
|
import { i18nMixin } from '@/composables/useI18n'
|
||||||
import { confirmMixin } from '@/composables/useConfirmHandle'
|
|
||||||
import { getRoleAll } from '@/api/system-administration/role'
|
import { getRoleAll } from '@/api/system-administration/role'
|
||||||
import {
|
import {
|
||||||
getUserList,
|
getUserList,
|
||||||
@@ -99,10 +110,43 @@ const ownUserId = () => localStorage.getItem('user_id')
|
|||||||
export default {
|
export default {
|
||||||
name: 'system-administration-user',
|
name: 'system-administration-user',
|
||||||
components: { PageTable, PageDialogForm },
|
components: { PageTable, PageDialogForm },
|
||||||
mixins: [i18nMixin('page.system_administration.user_management.user'), confirmMixin],
|
mixins: [i18nMixin('page.system_administration.user_management.user')],
|
||||||
data () {
|
data () {
|
||||||
const key = this.key.bind(this)
|
const key = this.key.bind(this)
|
||||||
const $t = this.$t.bind(this)
|
const $t = this.$t.bind(this)
|
||||||
|
const normalizeList = res => {
|
||||||
|
const data = res && res.data !== undefined ? res.data : res
|
||||||
|
if (Array.isArray(data)) return data
|
||||||
|
if (data && Array.isArray(data.list)) return data.list
|
||||||
|
if (data && Array.isArray(data.data)) return data.data
|
||||||
|
if (data && data.data && Array.isArray(data.data.data)) return data.data.data
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
const validateUsernameUnique = async (rule, value, callback) => {
|
||||||
|
const username = String(value || '').trim()
|
||||||
|
if (!username || username.length < 3) {
|
||||||
|
callback()
|
||||||
|
return
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
const res = await getUserList({ username, page_no: 1, page_size: 10000 })
|
||||||
|
const exists = normalizeList(res).some(item => {
|
||||||
|
const sameName = String(item.username || '') === username
|
||||||
|
const sameUser = this.handleType === 'edit' && String(item.user_id) === String(this.editId)
|
||||||
|
return sameName && !sameUser
|
||||||
|
})
|
||||||
|
callback(exists ? new Error($t(key('username_exists'))) : undefined)
|
||||||
|
} catch {
|
||||||
|
callback()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const validatePasswordConfirm = (rule, value, callback) => {
|
||||||
|
if (this.handleType === 'create' && value && value !== this.formData.password) {
|
||||||
|
callback(new Error($t(key('password_not_match'))))
|
||||||
|
return
|
||||||
|
}
|
||||||
|
callback()
|
||||||
|
}
|
||||||
return {
|
return {
|
||||||
loading: false,
|
loading: false,
|
||||||
submitting: false,
|
submitting: false,
|
||||||
@@ -112,12 +156,21 @@ export default {
|
|||||||
dialogTitle: '',
|
dialogTitle: '',
|
||||||
editId: '',
|
editId: '',
|
||||||
handleType: 'create',
|
handleType: 'create',
|
||||||
search: { username: '', nickname: '' },
|
search: { username: '', nickname: '', status: '' },
|
||||||
pagination: { current: 1, size: 10, total: 0 },
|
pagination: { current: 1, size: 10, total: 0 },
|
||||||
roleOptions: [],
|
roleOptions: [],
|
||||||
columns: [],
|
columns: [],
|
||||||
toolbarButtons: [],
|
toolbarButtons: [],
|
||||||
rowButtons: [],
|
rowButtons: [],
|
||||||
|
formData: {
|
||||||
|
username: '',
|
||||||
|
password: '',
|
||||||
|
password_confirm: '',
|
||||||
|
role_id: '',
|
||||||
|
nickname: '',
|
||||||
|
pass_number: '',
|
||||||
|
status: '1'
|
||||||
|
},
|
||||||
baseFormCols: {
|
baseFormCols: {
|
||||||
create: [
|
create: [
|
||||||
[{ type: 'input', prop: 'username', label: key('username'), placeholder: key('enter_username'), clearable: true, style: { width: '90%' } }],
|
[{ type: 'input', prop: 'username', label: key('username'), placeholder: key('enter_username'), clearable: true, style: { width: '90%' } }],
|
||||||
@@ -139,7 +192,8 @@ export default {
|
|||||||
baseRules: {
|
baseRules: {
|
||||||
username: [
|
username: [
|
||||||
{ required: true, message: key('enter_username'), trigger: 'blur' },
|
{ required: true, message: key('enter_username'), trigger: 'blur' },
|
||||||
{ min: 3, max: 20, message: key('username_length'), trigger: 'blur' }
|
{ min: 3, max: 20, message: key('username_length'), trigger: 'blur' },
|
||||||
|
{ validator: validateUsernameUnique, trigger: 'blur' }
|
||||||
],
|
],
|
||||||
password: [
|
password: [
|
||||||
{ required: true, message: key('enter_password'), trigger: 'blur' },
|
{ required: true, message: key('enter_password'), trigger: 'blur' },
|
||||||
@@ -147,10 +201,14 @@ export default {
|
|||||||
],
|
],
|
||||||
password_confirm: [
|
password_confirm: [
|
||||||
{ required: true, message: key('enter_confirm_password'), trigger: 'blur' },
|
{ required: true, message: key('enter_confirm_password'), trigger: 'blur' },
|
||||||
{ min: 6, max: 64, message: key('password_length'), trigger: 'blur' }
|
{ min: 6, max: 64, message: key('password_length'), trigger: 'blur' },
|
||||||
|
{ validator: validatePasswordConfirm, trigger: ['blur', 'change'] }
|
||||||
],
|
],
|
||||||
role_id: [
|
role_id: [
|
||||||
{ required: true, message: key('select_user_group'), trigger: 'change' }
|
{ required: true, message: key('select_user_group'), trigger: 'change' }
|
||||||
|
],
|
||||||
|
status: [
|
||||||
|
{ required: true, message: key('select_status'), trigger: 'change' }
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -168,7 +226,8 @@ export default {
|
|||||||
if (this.handleType === 'edit') {
|
if (this.handleType === 'edit') {
|
||||||
return {
|
return {
|
||||||
username: this.baseRules.username,
|
username: this.baseRules.username,
|
||||||
role_id: this.baseRules.role_id
|
role_id: this.baseRules.role_id,
|
||||||
|
status: this.baseRules.status
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return this.baseRules
|
return this.baseRules
|
||||||
@@ -255,10 +314,29 @@ export default {
|
|||||||
async initRoleOptions () {
|
async initRoleOptions () {
|
||||||
try {
|
try {
|
||||||
const res = await getRoleAll()
|
const res = await getRoleAll()
|
||||||
const data = Array.isArray(res) ? res : (res.data || [])
|
const data = this.normalizeResponse(res).list
|
||||||
this.roleOptions = data.map(item => ({ value: item.id, label: item.name }))
|
this.roleOptions = data.map(item => ({ value: item.id, label: item.name }))
|
||||||
} catch { /* 忽略 */ }
|
} catch { /* 忽略 */ }
|
||||||
},
|
},
|
||||||
|
normalizeResponse (res) {
|
||||||
|
const getTotal = (source, fallback) => {
|
||||||
|
if (!source) return fallback
|
||||||
|
const total = source.count ?? source.total ?? source.total_count ?? source.record_count
|
||||||
|
const value = Number(total)
|
||||||
|
return Number.isNaN(value) ? fallback : value
|
||||||
|
}
|
||||||
|
const containers = [res, res && res.data, res && res.data && res.data.data].filter(Boolean)
|
||||||
|
for (const item of containers) {
|
||||||
|
if (Array.isArray(item)) {
|
||||||
|
return { list: item, total: getTotal(res, item.length) }
|
||||||
|
}
|
||||||
|
const list = item.data || item.list || item.rows || item.records || item.items
|
||||||
|
if (Array.isArray(list)) {
|
||||||
|
return { list, total: getTotal(item, getTotal(res, list.length)) }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return { list: [], total: 0 }
|
||||||
|
},
|
||||||
async fetchData () {
|
async fetchData () {
|
||||||
this.loading = true
|
this.loading = true
|
||||||
try {
|
try {
|
||||||
@@ -267,10 +345,9 @@ export default {
|
|||||||
page_no: this.pagination.current,
|
page_no: this.pagination.current,
|
||||||
page_size: this.pagination.size
|
page_size: this.pagination.size
|
||||||
})
|
})
|
||||||
const list = Array.isArray(res) ? res : (res.data || [])
|
const data = this.normalizeResponse(res)
|
||||||
const total = Array.isArray(res) ? res.length : (res.count || 0)
|
this.tableData = data.list
|
||||||
this.tableData = list
|
this.pagination.total = data.total
|
||||||
this.pagination.total = total
|
|
||||||
} finally {
|
} finally {
|
||||||
this.loading = false
|
this.loading = false
|
||||||
}
|
}
|
||||||
@@ -280,7 +357,7 @@ export default {
|
|||||||
this.fetchData()
|
this.fetchData()
|
||||||
},
|
},
|
||||||
onReset () {
|
onReset () {
|
||||||
this.search = { username: '', nickname: '' }
|
this.search = { username: '', nickname: '', status: '' }
|
||||||
this.pagination.current = 1
|
this.pagination.current = 1
|
||||||
this.fetchData()
|
this.fetchData()
|
||||||
},
|
},
|
||||||
@@ -377,16 +454,34 @@ export default {
|
|||||||
} catch { /* 拦截器已处理 */ }
|
} catch { /* 拦截器已处理 */ }
|
||||||
}).catch(() => {})
|
}).catch(() => {})
|
||||||
},
|
},
|
||||||
|
async confirmAction (message, action) {
|
||||||
|
try {
|
||||||
|
await this.$confirm(
|
||||||
|
this.$t(message),
|
||||||
|
this.$t(this.key('prompt')),
|
||||||
|
{
|
||||||
|
confirmButtonText: this.$t(this.key('confirm')),
|
||||||
|
cancelButtonText: this.$t(this.key('cancel')),
|
||||||
|
type: 'warning',
|
||||||
|
closeOnClickModal: false
|
||||||
|
}
|
||||||
|
)
|
||||||
|
} catch {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
await action()
|
||||||
|
return true
|
||||||
|
},
|
||||||
async handleDelete (row) {
|
async handleDelete (row) {
|
||||||
if (String(row.user_id) === ownUserId()) {
|
if (String(row.user_id) === ownUserId()) {
|
||||||
this.$message.warning(this.$t(this.key('cannot_delete_self')))
|
this.$message.warning(this.$t(this.key('cannot_delete_self')))
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
const cancelled = await this.$confirmAction(
|
const ok = await this.confirmAction(
|
||||||
{ message: this.key('confirm_delete'), title: this.key('prompt') },
|
this.key('confirm_delete'),
|
||||||
() => deleteUser({ id: [row.user_id] })
|
() => deleteUser({ id: [row.user_id] })
|
||||||
)
|
)
|
||||||
if (cancelled) return
|
if (!ok) return
|
||||||
this.$message.success(this.$t(this.key('operation_success')))
|
this.$message.success(this.$t(this.key('operation_success')))
|
||||||
this.pagination.current = Math.min(
|
this.pagination.current = Math.min(
|
||||||
this.pagination.current,
|
this.pagination.current,
|
||||||
@@ -405,11 +500,11 @@ export default {
|
|||||||
this.$message.warning(this.$t(this.key('select_rows_first')))
|
this.$message.warning(this.$t(this.key('select_rows_first')))
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
const cancelled = await this.$confirmAction(
|
const ok = await this.confirmAction(
|
||||||
{ message: this.key('confirm_batch_delete'), title: this.key('prompt') },
|
this.key('confirm_batch_delete'),
|
||||||
() => batchDeleteUser({ id: rows.map(row => row.user_id) })
|
() => batchDeleteUser({ id: rows.map(row => row.user_id) })
|
||||||
)
|
)
|
||||||
if (cancelled) return
|
if (!ok) return
|
||||||
this.$message.success(this.$t(this.key('operation_success')))
|
this.$message.success(this.$t(this.key('operation_success')))
|
||||||
this.fetchData()
|
this.fetchData()
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user