antd <a-select-option> value=1,但请求接口时传递的值是字符串“1“

 错误示例:

<a-select-option value=1>
    text
</a-select-option>

官方文档:

  官方文档里明明写着value的类型可以是string或者number

正确示例:

<a-select-option v-for="option in selectOptions" :key="option.value">
    text
</a-select-option>

问题描述:

代码里里设置value=1,结果在请求接口时传递的值是字符串"1"

解决方法:

在组件中使用变量来传递key=1

<template> <div v-show="active === flag" class="step-main"> <div class="step-content"> <el-form ref="baseForm" :model="baseFormCurr" :rules="rules" label-width="105px"> <el-row :gutter="10"> <el-col :lg="8" :md="12" :sm="24" :xl="8" :xs="24"> <el-form-item label="表名称" prop="tableName"> <el-input v-model="baseFormCurr.tableName" autocomplete="off"></el-input> </el-form-item> </el-col> <el-col :lg="8" :md="12" :sm="24" :xl="8" :xs="24"> <el-form-item label="表类型" prop="tableType"> <el-select v-model="baseFormCurr.tableType" :disabled="formState.tableType" placeholder="请选择" style="width: 100%" @change="tableTypeChange"> <el-option v-for="item in dictCurr.table_type" :key="item.dictValue" :label="item.dictName" :value="item.dictValue" ></el-option> </el-select> </el-form-item> </el-col> <el-col :lg="8" :md="12" :sm="24" :xl="8" :xs="24"> <el-form-item label="描述" prop="comments"> <el-input v-model="baseFormCurr.comments" autocomplete="off" maxlength="100" show-word-limit ></el-input> </el-form-item> </el-col> <el-col :lg="8" :md="12" :sm="24" :xl="8" :xs="24"> <el-form-item label="数据库类型" prop="jdbcType"> <el-select ref="jdbcType" v-model="baseFormCurr.jdbcType" :disabled="formState.jdbcType" placeholder="请选择" style="width: 100%" @change="jdbcTypeChange"> <el-option v-for="item in dictCurr.jdbc_type" :key="item.dictValue" :label="item.dictName" :value="item.dictValue" ></el-option> </el-select> </el-form-item> </el-col> <el-col :lg="8" :md="12" :sm="24" :xl="8" :xs="24"> <el-form-item label="备注" prop="remark"> <el-input v-model="baseFormCurr.remark" autocomplete="off" maxlength="120" show-word-limit ></el-input> </el-form-item> </el-col> </el-row> </el-form> <vab-query-form> <vab-query-form-left-panel> <el-button :disabled="!baseFormCurr.jdbcType" icon="el-icon-plus" type="primary" @click="columnHandleAdd"> 添加 </el-button> <el-button icon="el-icon-plus" type="primary" @click="dialogVisible = true"> 常用字段 </el-button> <el-button :disabled="!selectRows.length > 0" icon="el-icon-delete" type="danger" @click="columnHandleDelete" > 删除 </el-button> </vab-query-form-left-panel> </vab-query-form> <el-form ref="tableForm" :model="{'tableForm': tableFormCurr}"> <el-table :data="tableFormCurr" :element-loading-text="elementLoadingText" border @selection-change="setSelectRows" > <el-table-column show-overflow-tooltip type="selection"></el-table-column> <el-table-column align="center" label="拖动" show-overflow-tooltip width="60" > <template v-slot="scope"> <el-button circle class="move-btn" icon="el-icon-d-caret" ></el-button> </template> </el-table-column> <el-table-column label="字段名称" min-width="200" prop="fieldName" show-overflow-tooltip > <template v-slot="scope"> <el-form-item :prop="'tableForm.'+scope.$index+'.fieldName'" :rules="columnRules.fieldName" class="el-form-item-table" > <el-input v-model="scope.row.fieldName" :disabled="scope.row.disabled" style="width: 100%"/> </el-form-item> </template> </el-table-column> <el-table-column label="字段类型" min-width="180" prop="fieldType" show-overflow-tooltip > <template v-slot="scope"> <el-form-item :prop="'tableForm.'+scope.$index+'.fieldType'" :rules="columnRules.fieldType" class="el-form-item-table" > <el-select v-model="scope.row.fieldType" :disabled="scope.row.disabled" default-first-option="" filterable placeholder="请选择" style="width: 100%"> <el-option v-for="item in baseDictData.fieldList" :key="item" :label="item" :value="item" ></el-option> </el-select> </el-form-item> </template> </el-table-column> <el-table-column label="字段长度" min-width="140" prop="fieldLength" show-overflow-tooltip > <template v-slot="scope"> <el-form-item :prop="'tableForm.'+scope.$index+'.fieldLength'" class="el-form-item-table" > <el-input-number v-model="scope.row.fieldLength" :disabled="scope.row.disabled" :max="20000" :min="0" controls-position="right" style="width: 100%" ></el-input-number> </el-form-item> </template> </el-table-column> <el-table-column label="字段精度" min-width="140" prop="fieldPrecision" show-overflow-tooltip > <template v-slot="scope"> <el-form-item :prop="'tableForm.'+scope.$index+'.fieldComments'" class="el-form-item-table" > <el-input-number v-model="scope.row.fieldPrecision" :disabled="scope.row.disabled" :max="100" :min="0" controls-position="right" style="width: 100%" ></el-input-number> </el-form-item> </template> </el-table-column> <el-table-column label="字段描述" min-width="240" prop="fieldComments" show-overflow-tooltip > <template v-slot="scope"> <el-form-item :prop="'tableForm.'+scope.$index+'.fieldComments'" :rules="columnRules.fieldComments" class="el-form-item-table" > <el-input v-model="scope.row.fieldComments" :disabled="scope.row.disabled" maxlength="100" show-word-limit style="width: 100%"/> </el-form-item> </template> </el-table-column> <el-table-column label="主键" min-width="80" prop="izPk" show-overflow-tooltip > <template v-slot="scope"> <el-form-item :prop="'tableForm.'+scope.$index+'.izPk'" class="el-form-item-table" > <el-switch v-model="scope.row.izPk" :active-value="1" :disabled="scope.row.disabled" :inactive-value="0" @change="pKChange(scope.row)" > </el-switch> </el-form-item> </template> </el-table-column> <el-table-column label="非空" min-width="80" prop="izNotNull" show-overflow-tooltip > <template v-slot="scope"> <el-form-item :prop="'tableForm.'+scope.$index+'.izNotNull'" class="el-form-item-table" > <el-switch v-model="scope.row.izNotNull" :active-value="1" :disabled="scope.row.disabled || scope.row.izPk === 1" :inactive-value="0" > </el-switch> </el-form-item> </template> </el-table-column> </el-table> </el-form> </div> <step-footer ref="step-footer" :flag="flag" :info-data="{ obj: this, baseForm: baseFormCurr, tableForm: tableFormCurr }" :max-flag="maxFlag" :min-flag="minFlag" ></step-footer> <!-- 选择预制字段--> <el-dialog :before-close="handleClose" :visible.sync="dialogVisible" append-to-body title="选择常见字段" width="30%"> <div> <template v-for="item in BuiltInFields"> <el-checkbox v-model="BuiltInFieldsSelect" :label="item.fieldName" border style="margin: 5px" @change="changeBuiltInFieldsSelect"></el-checkbox> </template> </div> <span slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">取 消</el-button> <el-button type="primary" @click="AddDefaultFields">确 定</el-button> </span> </el-dialog> </div> </template> <script> import {isCode, isNull} from "@/utils/validate"; import StepFooter from "./footer/StepFooter.vue" import {deepClone} from "@/utils/clone"; import Sortable from "sortablejs"; import {uuid} from "@/utils"; import {getFieldTypes, getJavaFieldTypesBySafety} from "@/api/generator/tableManagement"; import {isNotNull} from "@/utils/valiargs"; import { useGlobalStore } from '@/pinia/global'; let state = useGlobalStore(); export default { name: "TableDataStep", components: {Sortable, StepFooter}, props: { active: { type: Number, default: () => { return 1; }, }, minFlag: { type: Number, default: () => { return 1; }, }, maxFlag: { type: Number, default: () => { return 1; }, }, baseForm: { type: Object, default: () => { return {}; }, }, tableForm: { type: Array, default: () => { return []; }, }, dict: { type: Object, default: () => { return {}; }, }, baseDictData: { type: Object, default: () => { return { fieldList: [], JavaFieldMap: {}, }; }, } }, data() { const validateTableName = (rule, value, callback) => { if (isNull(value)) { callback(new Error("请输入表名")); } if (!isCode(value)) { callback(new Error("表名只能为字母、数字或下划线")); } else { callback(); } }; const validateName = (rule, value, callback) => { if (!isCode(value)) { callback(new Error("只能为字母、数字或下划线")); } else { callback(); } }; return { BuiltInFieldsSelect: [],//已选中的字段 BuiltInFields: [ { "encryptData": null, "fieldName": "id", "fieldType": "bigint", "fieldLength": 19, "fieldPrecision": 0, "fieldComments": "唯一主键", "izPk": 1, "izNotNull": 1, "izShowList": null, "izShowForm": null, "javaType": "String", "showType": null, "dictTypeCode": null, "sort": 0, "validateType": null, "queryType": null, "disabled": false }, { "encryptData": null, "fieldName": "org_ids", "fieldType": "varchar", "fieldLength": 500, "fieldPrecision": 0, "fieldComments": "父级主键集合", "izPk": 0, "izNotNull": 0, "izShowList": null, "izShowForm": null, "javaType": "String", "showType": null, "dictTypeCode": null, "sort": 1, "validateType": null, "queryType": null, "disabled": false }, { "encryptData": null, "fieldName": "tenant_id", "fieldType": "bigint", "fieldLength": 19, "fieldPrecision": 0, "fieldComments": "多租户ID", "izPk": 0, "izNotNull": 0, "izShowList": null, "izShowForm": null, "javaType": "String", "showType": null, "dictTypeCode": null, "sort": 8, "validateType": null, "queryType": null, "disabled": false }, { "encryptData": null, "fieldName": "create_by", "fieldType": "bigint", "fieldLength": 19, "fieldPrecision": 0, "fieldComments": "创建者", "izPk": 0, "izNotNull": 1, "izShowList": null, "izShowForm": null, "javaType": "String", "showType": null, "dictTypeCode": null, "sort": 10, "validateType": null, "queryType": null, "disabled": false }, { "encryptData": null, "fieldName": "create_time", "fieldType": "datetime", "fieldLength": 0, "fieldPrecision": 0, "fieldComments": "创建间", "izPk": 0, "izNotNull": 1, "izShowList": null, "izShowForm": null, "javaType": "String", "showType": null, "dictTypeCode": null, "sort": 11, "validateType": null, "queryType": null, "disabled": false }, { "encryptData": null, "fieldName": "update_by", "fieldType": "bigint", "fieldLength": 19, "fieldPrecision": 0, "fieldComments": "修改人", "izPk": 0, "izNotNull": 1, "izShowList": null, "izShowForm": null, "javaType": "String", "showType": null, "dictTypeCode": null, "sort": 12, "validateType": null, "queryType": null, "disabled": false }, { "encryptData": null, "fieldName": "update_time", "fieldType": "datetime", "fieldLength": 0, "fieldPrecision": 0, "fieldComments": "修改间", "izPk": 0, "izNotNull": 1, "izShowList": null, "izShowForm": null, "javaType": "String", "showType": null, "dictTypeCode": null, "sort": 13, "validateType": null, "queryType": null, "disabled": false }, { "fieldName": "delected", "sort": 8, "izPk": 0, "izNotNull": 1, "izShowList": 0, "izShowForm": 0, "queryType": "", "fieldType": "int", "fieldLength": 1, "fieldPrecision": 0, "fieldComments": "删除", "javaType": "", "validateType": "", "showType": "", "dictTypeCode": "", "disabled": false }, { "fieldName": "version", "sort": 8, "izPk": 0, "izNotNull": 1, "izShowList": 0, "izShowForm": 0, "queryType": "", "fieldType": "int", "fieldLength": 1, "fieldPrecision": 0, "fieldComments": "乐观锁", "javaType": "", "validateType": "", "showType": "", "dictTypeCode": "", "disabled": false } ], dialogVisible: false,//选址内置字段 // 标示 flag: 1, title: "数据库表设置", dictCurr: [], baseFormCurr: {}, tableFormCurr: [], formState: { jdbcType: false, tableType: false, }, rules: { tableName: [ {required: true, trigger: "blur", validator: validateTableName}, ], tableType: [ {required: true, trigger: "change", message: "请选择表类型"}, ], jdbcType: [ {required: true, trigger: "change", message: "请选择数据库类型"}, ], comments: [ {required: true, trigger: "blur", message: "请输入描述"}, ], }, treeName: "parent_id", // 新增字段模版 columnFormTemp: { id: "", sort: 0, izPk: 0, izNotNull: 0, izShowList: 0, izShowForm: 0, queryType: "", fieldName: "", fieldType: "", fieldLength: 0, fieldPrecision: 0, fieldComments: "", javaType: "", validateType: "", showType: "", dictTypeCode: "", disabled: false, }, columnRules: { fieldName: [ {required: true, message: "请选择字段名称", trigger: "blur"}, {required: true, trigger: "blur", validator: validateName}, ], fieldType: [ {required: true, message: "请选择字段类型", trigger: "change"}, ], fieldComments: [ {required: true, message: "请输入字段描述", trigger: "blur"}, ] }, layout: "total, sizes, prev, pager, next, jumper", selectRows: "", elementLoadingText: "正在加载...", }; }, created() { // 告诉父节点 自己的 flag 编号 this.$emit("inform-flag", this.flag, this.title); }, mounted() { // 拷贝 props this.baseFormCurr = deepClone(this.baseForm); this.tableFormCurr = deepClone(this.tableForm); this.dictCurr = deepClone(this.dict); // 数据库字段类型 // this.dictCurr.field_type = this.$getDictList(this.baseFormCurr.jdbcType + "_data_type"); // 改成自己项目的字典项获取方式 // this.dict = state.sysDict; // this.dictCurr.field_type = state.sysDict.table_type; let dataType = this.baseFormCurr.jdbcType + "_data_type"; // JavaScript 对象支持两种属性访问方式:1点符号:object.propertyName ,适用于静态属性名。 2方括号符号:object[propertyName] ,适用于动态属性名,propertyName 可以是一个变量或表达式。 this.dictCurr.field_type = state.sysDict[dataType]; // 表拖动 this.rowDrop(); // 初始化数据 this.doGetFieldData(); }, watch: { baseForm(newV, oldV) { this.baseFormCurr = deepClone(newV); }, tableForm(newV, oldV) { this.tableFormCurr = deepClone(newV); }, dict(newV, oldV) { this.dictCurr = deepClone(newV); // 数据库字段类型 // this.dictCurr.field_type = this.$getDictList(this.baseFormCurr.jdbcType + "_data_type"); // 改成自己项目的字典项获取方式 // this.dict = state.sysDict; // this.dictCurr.field_type = state.sysDict.table_type; let dataType = this.baseFormCurr.jdbcType + "_data_type"; // JavaScript 对象支持两种属性访问方式:1点符号:object.propertyName ,适用于静态属性名。 2方括号符号:object[propertyName] ,适用于动态属性名,propertyName 可以是一个变量或表达式。 this.dictCurr.field_type = state.sysDict[dataType]; }, }, methods: { handleClose() { this.dialogVisible = false }, changeBuiltInFieldsSelect(e) { this.BuiltInFieldsSelect = this.removeElementsFromArray(this.BuiltInFieldsSelect, this.tableFormCurr) }, removeElementsFromArray(A, B) { A = A.filter(a => { let isEqual = B.some(b => b.fieldName === a); if (isEqual) { this.$message.error(`已存在字段:${a}`) } return !isEqual; }); return A; }, //添加默认字段 AddDefaultFields(params) { console.log(this.BuiltInFieldsSelect) for (const param of this.BuiltInFieldsSelect) { this.AddDefaultFields2(param) } this.dialogVisible = false }, //方法2 AddDefaultFields2(title) { let temp = null for (const tempElement of this.BuiltInFields) { if (tempElement.fieldName == title) { temp = tempElement } } this.tableFormCurr.push(temp); }, // 数据库类型发生改动 jdbcTypeChange(newValue) { const _this = this; this.tableFormCurr.jdbcType = this.$refs.jdbcType.value; this.$baseConfirm("更换数据库类型将会清空当前已设字段,你确定要更换吗", null, () => { // 改为新 _this.tableFormCurr.jdbcType = newValue; // 加载字典 // _this.dictCurr.field_type = _this.$getDictList(_this.baseFormCurr.jdbcType + "_data_type"); // 改成自己项目的字典项获取方式 // this.dict = state.sysDict; // this.dictCurr.field_type = state.sysDict.table_type; let dataType = this.baseFormCurr.jdbcType + "_data_type"; // JavaScript 对象支持两种属性访问方式:1点符号:object.propertyName ,适用于静态属性名。 2方括号符号:object[propertyName] ,适用于动态属性名,propertyName 可以是一个变量或表达式。 this.dictCurr.field_type = state.sysDict[dataType]; // 清空已有字段数据 _this.tableFormCurr = []; // 初始化数据 this.doGetFieldData(); }); }, // 表类型发生改动 tableTypeChange(newValue) { if (newValue === '0') { // 删除 parent_id 字段 for (let i = this.tableFormCurr.length - 1; i >= 0; i--) { let item = this.tableFormCurr[i]; if (item.fieldName === this.treeName) { this.tableFormCurr.splice(i, 1); break; } } } else if (newValue === '1') { // 删除 parent_id 字段 for (let i = this.tableFormCurr.length - 1; i >= 0; i--) { let item = this.tableFormCurr[i]; if (item.fieldName === this.treeName) { this.tableFormCurr.splice(i, 1); break; } } // 增加 parent_id 字段 let tmp = deepClone(this.columnFormTemp); tmp.disabled = true; tmp.fieldName = this.treeName; tmp.fieldType = "bigint"; tmp.fieldLength = 20; tmp.fieldComments = "上级ID"; tmp.javaType = "Integer"; tmp.izNotNull = 1; this.columnHandleAdd(tmp); } }, // 主键改动 pKChange(el) { if (!isNull(el)) { // 如果主键选中 则默认选中不可为空 if (el.izPk === 1) { el.izNotNull = 1; } else { el.izNotNull = 0; } } }, // ============================== async doGetFieldData() { this.$emit("loading"); // 通知父级 锁定当前表 this.$emit("inform-data", { fieldList: await this.doGetFieldTypes(), JavaFieldMap: await this.doGetJavaFieldTypesBySafety(), }); this.$emit("unLoading"); }, // 获得 数据类型 async doGetFieldTypes() { // const { data } = await getFieldTypes(); // 改成自己项目的数据返回格式 const res = await getFieldTypes(); const data = res.result.opsliData.data; if (isNotNull(data)) { return data; } return null; }, // 获得 Java 类型 (安全兜底模式) async doGetJavaFieldTypesBySafety() { // const { data } = await getJavaFieldTypesBySafety(); // 改成自己项目的数据返回格式 const res = await getJavaFieldTypesBySafety(); const data = res.result.opsliData.data; if (isNotNull(data)) { return data; } return null; }, // 行添加 columnHandleAdd(params) { let temp; if (!isNull(params) && !(params instanceof MouseEvent)) { temp = params; } else { temp = deepClone(this.columnFormTemp); } temp.id = "temp_" + uuid() if (this.tableFormCurr == null || this.tableFormCurr.length === 0) { temp.sort = 0; } else { temp.sort = this.tableFormCurr.length; } this.tableFormCurr.push(temp); }, // 行删除 columnHandleDelete(row) { if (row.id) { this.$baseConfirm("你确定要删除当前字段吗", null, () => { for (let i = this.tableFormCurr.length - 1; i >= 0; i--) { let item = this.tableFormCurr[i]; if (item.id === row.id) { // 树装接口 不允许删除 parent_id 字段 if (this.tableFormCurr.tableType === '1') { if (item.fieldName !== this.treeName) { this.tableFormCurr.splice(i, 1); } } else { this.tableFormCurr.splice(i, 1); } break; } } }); } else if (this.selectRows.length > 0) { const ids = this.selectRows.map((item) => item.id); this.$baseConfirm("你确定要删除当前字段吗", null, () => { for (let i = this.tableFormCurr.length - 1; i >= 0; i--) { let item = this.tableFormCurr[i]; if (ids.indexOf(item.id) !== -1) { // 树装接口 不允许删除 parent_id 字段 if (this.tableFormCurr.tableType === '1') { if (item.fieldName !== this.treeName) { this.tableFormCurr.splice(i, 1); } } else { this.tableFormCurr.splice(i, 1); } } } }); } else { this.$baseMessage("未选中任何行", "error"); return false; } }, // 行选中 setSelectRows(val) { this.selectRows = val; }, //行拖拽 rowDrop() { const tbody = this.$refs["tableForm"].$el .querySelector(".el-table__body-wrapper tbody"); const _this = this Sortable.create(tbody, { // 只能纵向拖动 axis: "y", // 限制触发事件只能某个元素可以触发 handle: ".move-btn", // 如果设置成true,则被拖拽的元素在返回新位置,会有一个动画效果。 revert: true, // 如果设置成true,则元素被拖动到页面边缘,会自动滚动。 scroll: true, onEnd({oldIndex, newIndex}) { _this.tableFormCurr[oldIndex].sort = newIndex; // 如果是 从后往前 移动 则 当前项改为newIndex 而 原newIndex 往后的所有内容全部向后顺产移动 if (oldIndex > newIndex) { for (let i = oldIndex; i > newIndex; i--) { _this.tableFormCurr[i - 1].sort = i; } } // 如果是 从前往后 移动 则 当前项改为newIndex 而 原newIndex 往后的所有内容全部向前顺产移动 else { for (let i = oldIndex; i < newIndex; i++) { _this.tableFormCurr[i + 1].sort = i; } } } }) }, }, }; </script> 这段代码是一个vue文件, 代码语法的框架是element-ui, 版本是2.15.13。我的前端项目vue版本是3.4.21, 框架ant-design-vue版本是4.2.1。现在的问题是文件内容和项目框架语法不一样, 请帮我把整个文件的代码内容修改成适配我项目框架的语法(注意:我的前端项目vue版本是3.4.21, 框架ant-design-vue版本是4.2.1,必须生成对应版本的语法)。 不要删除里边已经注释的代码, 即使有相同的代码, 你也不要省略代码, 把所有内容全部输出来, 需要保持原有的布局样式而调整转换代码。如果这个文件引入的别的文件, 不用你关心别的文件, 你不要给我生成别的文件内容, 最后生成一个vue文件给我, 如果输出内容过长而被终止截断了,请接着输出剩余的部分。转换后要求代码不报错, 按钮方法和底部方法名称要对应起来, 转换过程中不要遗漏代码, 注意:如果之前代码有$baseConfirm, 给我替换成Modal.confirm , 并且引入import { message, Modal } from “ant-design-vue”; 如果之前代码有$baseMessage, 给我替换成message.success或message.warning或message.error。 你好好思考分析下我的需求,不是将把Element UI组件替换为Ant Design Vue组件,你考虑转换后的版本了吗,不同版本语法api不一样,否则转换后的代码根本不能用。不要给我进行简化处理,方法内容不要给我留空,不要等着我补充,你都给我转换处理好。
08-06
<template> <div class="transfer-container"> <!-- 左侧表格 --> <div class="table-container"> <div class="header-box"> <span>设备列表</span> <span class="checkAll" @click="checkAll">全选</span> </div> <div class="select-box"> <div class="select-item"> <span>{{ $t('主机型号:') }}</span> <a-select v-model="hostModel" @change="changeSelect" :placeholder="$t('请选择主机型号')" allowClear> <a-select-option v-for="item in periodList" :key="item.id" :value="item.itemDesc" :title="item.itemName"> {{ item.itemName }} </a-select-option> </a-select> </div> <div class="select-item"> <span>{{ $t('组织名称:') }}</span> <org-tree-select @treeSelect="orgTreeSelect"></org-tree-select> </div> </div> <!-- 左侧列表 --> <div class="list-container"> <div v-for="item in leftData" :key="item.personId" class="list-item"> <a-checkbox v-model="item.checked" :disabled="item.deviceOnOffLine == 0 || item.configStatus == 1" class="checkbox" ></a-checkbox> <div class="device-box"> <div class="top-info"> <span>{{ item.deviceName }}</span> <span v-show="item.configStatus == 1" @click="openTask(item)"> <hd-icon type="files" /> {{ $t('已配任务') }} </span> </div> <div class="bottom-info"> <span>{{ $t('探测器信息:') }}</span> <span>{{ item.detectorName }} </span> | <span>{{ item.productModel }} </span> | <span>{{ item.detectorUniqueCode }} </span> </div> </div> </div> <a-empty v-show="leftData.length === 0" /> </div> <div v-if="leftData.length" class="pagination"> <a-pagination simple :defaultCurrent="pagination.currentPage" :total="pagination.totalRows" @change="changePage" /> </div> </div> <!-- 中间操作按钮 --> <div class="transfer-actions"> <a-button type="primary" icon="right" :disabled="selectedLeft.length === 0" @click="moveToRight"> </a-button> </div> <!-- 右侧表格 --> <div class="table-container right-content"> <div class="header-box"> <span>{{ $t('已选择列表') + '(' + rightData.length + ')' }}</span> <a-button type="primary" :disabled="rightData.length === 0" @click="clearAll"> 清除 </a-button> </div> <div class="list-container"> <div v-for="item in rightData" :key="item.personId" class="list-item right-list"> <div class="device-box"> <div class="top-info"> <span>{{ item.deviceName }}</span> <div>{{ item.detectorOwnerName }}</div> <span v-show="item.configStatus == 1" @click="openTask(item)"> <hd-icon type="files" /> {{ $t('已配任务') }} </span> </div> <div class="bottom-info"> <span>{{ $t('探测器信息:') }}</span> <span>{{ item.detectorName }} </span> | <span>{{ item.productModel }} </span> | <span>{{ item.detectorUniqueCode }} </span> </div> </div> <img src="@/assets/img/icon-remove.png" @click="moveToLeft(item)" alt="" /> </div> <a-empty v-show="rightData.length === 0" /> </div> </div> <!--任务已存在 --> <myModal :params="{ title: $t('已配置任务列表'), showFooter: false }" :visible="visible" @cancel="visible = false" destroyOnClose > <template v-slot:header><span></span></template> <template v-slot:body> <div class="table_title"> {{ $t('探测名称') }} </div> <a-table :columns="detailColumns" :scroll="{ x: '100%', y: 400 }" :dataSource="detailData" row-key="id" :pagination="false" > </a-table> </template> </myModal> </div> </template> <script> import factory from '../factory' import myModal from '@/components/scfComponents/modalComponents/modal.vue' import orgTreeSelect from '@/components/orgTreeSelect/orgTreeSelect' export default { components: { myModal, orgTreeSelect }, data() { return { visible: false, // 弹窗 periodList: [], // 主机型号列表 orgData: {}, // 组织树数据 leftData: [], // 左侧表格数据 rightData: [], // 右侧表格数据 pagination: { pageSize: 10, currentPage: 1, totalRows: 0, }, // 分页 // 已配任务列表表头 detailColumns: [ { title: this.$t('日期'), dataIndex: 'date', ellipsis: true, }, { title: this.$t('间'), dataIndex: 'executeTime', ellipsis: true, }, { title: this.$t('空开操作'), dataIndex: 'operation', ellipsis: true, }, ], // 已配任务列表数据 detailData: [], } }, computed: { // 选中左侧列表 selectedLeft() { return this.leftData.filter(item => item.checked) }, }, mounted() { this.getDic() // 初始化数据 this.leftData = [] this.rightData = [] }, methods: { // 主机型号列表 getDic() { factory.getDic(1080).then(res => { this.periodList = res }) }, // 获取左侧表格数据 getLeftTableData() { let params = { page: this.pagination.currentPage, orgCodes: [this.orgData.orgCode], productModel: this.hostModel, } factory.getBatchDetector(params).then(res => { if (res.success) { this.leftData = res.data.map(item => ({ ...item, checked: false })) || [] // 如果右侧存在数据需要把数据过滤一下 if (this.rightData.length > 0) { let ids = this.rightData.map(item => item.id) this.leftData = this.leftData.filter(item => !ids.includes(item.id)) } } }) }, // 查询已存在空开定任务 getDetectorJob(record) { factory.getDetectorJob(record.jobId).then(res => { if (res.success) { this.detailData = res.data.map(item => { item.detectorName = record.detectorName || '' item.weekList = this.getActiveWeeks(item.rept) return item }) || [] } }) }, // 主机型号 changeSelect(value) { if (value && Object.keys(this.orgData).length > 0) { this.getLeftTableData() } else { this.leftData = [] } }, getActiveWeeks(rept) { const weekDays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'] const pattern = rept.split('') return pattern .map((char, index) => (char == '1' ? weekDays[index] : null)) .filter(Boolean) .join('、') }, // 组织树节点选择 orgTreeSelect(node) { this.orgData = node if (this.hostModel && Object.keys(this.orgData).length > 0) { this.getLeftTableData() } else { this.leftData = [] } }, // 全选 checkAll() { if (this.leftData.length === 0) return this.leftData.forEach(item => { if (item.deviceOnOffLine == 1 && item.configStatus == 0) { item.checked = true } }) }, // 清除 clearAll() { const newLeft = [...this.leftData] this.rightData.forEach(rightItem => { if (!newLeft.some(leftItem => leftItem.id == rightItem.id)) { newLeft.push({ ...rightItem, checked: false }) } }) this.leftData = newLeft this.rightData = [] }, // 向右移动选中项 moveToRight() { this.rightData = [...this.rightData, ...this.selectedLeft] this.leftData = this.leftData.filter(item => !this.selectedLeft.some(i => i.id === item.id)) }, // 向左移动单个项 moveToLeft(item) { this.rightData = this.rightData.filter(i => i.id !== item.id) this.leftData = [...this.leftData, { ...item, checked: false }] }, // 打开已配置任务列表 openTask(record) { this.visible = true this.getDetectorJob(record) }, }, } </script> <style lang="less" scoped> .transfer-container { width: 100%; display: flex; justify-content: space-around; box-sizing: border-box; } .table-container { width: 48%; height: 100%; position: relative; font-family: '微软雅黑'; font-weight: 400; border: 1px solid #ebedef; .header-box { height: 46px; width: 100%; display: flex; align-items: center; padding: 0 16px; border-bottom: 1px solid rgb(229, 231, 234); background: rgb(242, 243, 244); justify-content: space-between; color: rgb(21, 23, 26); font-size: 14px; font-weight: 700; .checkAll { cursor: pointer; color: rgb(41, 141, 255); } } .select-box { display: flex; height: 64px; padding: 0 20px; align-items: center; .select-item { margin-right: 24px; color: rgb(157, 166, 177); > span:first-child { margin-right: 5px; } } } .list-container { padding: 0 20px; height: 392px; overflow-y: scroll; .list-item { height: 74px; display: flex; align-items: center; .device-box { margin-left: 16px; .top-info { display: flex; align-items: center; span { cursor: pointer; color: #298dff; font-size: 14px; } div { height: 24px; border-radius: 2px; font-size: 12px; display: flex; cursor: default; margin-right: 24px; align-items: center; padding: 0 8px; color: rgb(66, 75, 86); background: rgb(236, 238, 240); } span:first-child { color: rgb(21, 23, 26); font-size: 16px; cursor: default; margin-right: 24px; } } .bottom-info { color: rgb(105, 118, 136); font-size: 14px; > span { margin: 0 5px; } } } } } .pagination { display: flex; height: 58px; align-items: center; justify-content: flex-end; } } .right-content { .device-box { margin: 0; } .list-container { height: 514px; .list-item { justify-content: space-between; .device-box { margin: 0; } img { width: 20px; height: 20px; display: inline-block; } } } } .transfer-actions { margin-top: 56px; display: flex; flex-direction: column; justify-content: center; } </style> 代码评审
08-02
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值