1.表单头部的操作按钮
2.表格查询条件
3.Form常用组件示例3-1 输入框
3-2 下拉选择框（基础值列表、自定义值列表以及请求后端数据加载值列表）
3-3 品牌
3-4 大区
3-5 小区
3-6 经销商
3-7 车系
3-8 日期选择器、月份选择器（单）
3-9 日期选择器（双）
3-7 小区
3-7 小区
3-7 小区
3-7 小区
3-7 小区
3-7 小区
3-7 小区
3-7 小区2.表格查询条件
2.表格查询条件
2.表格查询条件
2.表格查询条件
2.表格查询条件
2.表格查询条件
2.表格查询条件
主要代码区域
<one-table-template
ref="multipleTable"
:dynamicButtons="tableButtons" // 查询、导出、重置、新增等的组件配置
:dynamicComponents="tableComponents" // 搜索条件的组件配置
:dynamicApiConfig="apiConfig" // 列表查询的接口
:dynamicTableCols="tableCols" // 表格中的字段
:dynamicFormFields="formField" // 搜索条件的form
:dynamicUnFormFields="unFormFields" // 搜索条件的form查询时需要排除的多余字段
:dynamicIsShowSelect="true" // 开启多选
:selectable="getSelectable" // 多选中不可勾选的规则
>
主要字段大意
| 字段名 | 代表意思 |
|---|---|
| dynamicButtons | 查询、导出、重置、新增等的组件配置【tableButtons】 |
| dynamicComponents | 搜索条件的组件配置【tableComponents】 |
| dynamicApiConfig | 列表查询的接口【apiConfig】 |
| dynamicTableCols | 表格中的字段【tableCols】 |
| dynamicFormFields | 搜索条件的form【formField】 |
| dynamicUnFormFields | 搜索条件的form查询时需要排除的多余字段【unFormFields】 |
| dynamicIsShowSelect | 开启多选【true】 |
| selectable | 多选中不可勾选的规则【getSelectable】 |
常用组件示例：
-
1.表单头部的操作按钮【:dynamicButtons=“tableButtons”】
在 data 中定义 tableButtons 按钮配置数组，并配置如下：
- 主要参数：
- name（按钮的 icon 名称)
- position（可选项有 left 和 right 表示左边按钮还是右边按钮）
- text 为按钮的名称
- clickEvent 为按钮的点击事件
- 查询是封装好的函数，可以直接调用 this.tableQuery(1) 来重置页码成 1 并加载列表数据
- 重置是封装好的函数，可以直接调用 this.reset() 来还原 form 中的数据
- 导出是封装好的函数，可以直接调用 this.exportExcel(“精准营销规则维护.xlsx”, “精准营销规则维护”) 来导出表格的数据 ，导出的表格中，如果有状态码没有文字，需要后端加上文字，不然导出的也是状态码
- mix-table操作表格新、删除或更改 status 状态时，如果表格中有些操作栏如：作废，绑定，需要禁用的，需要将当前按钮的key+1重新渲染一下组件的状态（不然会出现 table 内的操作按钮不会禁用，与判断条件不符的问题）
tableButtons: [ { compKey: "btnKey1", type: "primary", size: "small", clickEvent: () => this.loadTableData(), name: "search", position: "right", fuzzySearch: true, text: this.$t("sys.button.query"), //查询 }, { compKey: "btnKey2", type: "", size: "small", name: "reset", position: "right", clickEvent: () => this.reset(), text: this.$t("sys.button.reset"), }, { compKey: "btnKey7", type: "", size: "small", position: "left", clickEvent: () => { // this.handleOperation('', 3) this.exportExcel("精准营销规则维护.xlsx", "精准营销规则维护") }, text: "导出", }, ],2.查询条件【:dynamicComponents=“tableComponents”】
- 主要字段大意
字段名 代表意思 compKey 字段的ref labelName form表单的label字段 labelWidth form表单的label字段的宽度 component 引入的自定义组件 lookuptype 自定义组件下拉选值列表的code码 type 一般为组件内部定义的组件类型 readonly 是否仅为显示状态 disabled 是否禁用组件 isMul 单选多选，默认false单选 isMust otherField 如：品牌改变清空大区、小区的值，需要在大区、小区中填入品牌的字段：（以“,”隔开，以“-”分别区分组件中字段名与网格字段，多个请使用“|”进行分隔）// 格式如：carBrandCode-jzCarBrandCode parentFileds 如：大区需要与品牌联动 parentFileds: “carBrandCode” ，小区需要与大区、品牌联动 parentFileds: “bigAreaId|carBrandCode” 可以已使用这个字段 （使用这个） options:[] 组件的下拉列表的值 additionalParams form中当前组件需要使用到一些父组件中的额外变量：例如：弹窗组件中，给自定义组件赋值父组件选中的品牌 dataToObject 待考证：应该是如上additionalParams 字段同一功能 component <p id="3-3"></p>3.Form常用组件示例
-
输入框
{ compKey: "compKey3", labelName: "二级规则名称", codeField: "rulesTwoName", component: () => import("@/components/org/commonInput"), type: "inputText", isMust: true, }, -
下拉选择框（基础值列表、自定义值列表以及请求后端数据加载值列表）
- 基础值列表（填入lookuptype: “SE9522”）即可
{ compKey: "compKey2", labelName: "一级规则类型", codeField: "rulesOne", component: () => import("@/components/org/LookupValue"), lookuptype: "SE9522", type: "dropdownList", isMust: true, changeCode: (e) => {}, },- 自定义值列表数据
{ compKey: "compKey4", labelName: "状态", codeField: "solicitationRulesStatus", component: () => import("@/components/org/LookupValue"), type: "dropdownList", isMust: true, // 1.申请单状态 (1:待提交 2:已提交 3:审核通过 4:驳回) options: [ { lookupValueCode: "1", lookupValueName: "停止", }, { lookupValueCode: "2", lookupValueName: "发布", }, ], changeCode: (e) => {}, },- 加载后端数据值列表
getLookupValue() { let that = this; let queryObj = { // api配置 apiConfig: seApis.mdsLookupValueQueryByPage, // 需要调用的API服务配置 apiServices: [ { //表格中台返回网格的字段 apiQueryRow: ["lookupValueCode", "lookupValueName"] } ], //条件/实体参数（变量），根据typeParam中的定义配置 variables: { pageSize: 10, pageIndex: 1, //当前中台使用的名称有dataInfo、info，具体查看API文档 dataInfo: { lookupTypeCode: "SE9522" } //值列表编码 } }; let paramD = that.$getParams(queryObj); // 调用中台API方法（可复用） that.$requestGraphQL(paramD).then(response => { if ( response.data[queryObj.apiConfig.ServiceCode].result == "1" && response.data[queryObj.apiConfig.ServiceCode].rows != "" ) { that.tableComponents.find(v => v.codeField === 'rulesOne').options = response.data[queryObj.apiConfig.ServiceCode].rows; } }); }, -
品牌
- 如果有经销商，需要在改变品牌时重新更改经销商组件中的品牌选中值
{ compKey: "compKey1", labelName: "品牌", codeField: "carBrandCode", component: () => import("@/components/org/carBrand/carBrand"), change: (e) => { this.formField.carBrandCode = val this.tableComponents.find( o => o.codeField === 'dlrCode').additionalParams.carBrandCode = e; }, type: "dropdownList", isMust: true }, -
大区
- 大区与品牌联动 parentFileds: “carBrandCode”
{ compKey: "compKey5", labelName: this.$t("org.label.region"), // 大区 codeField: "bigAreaId", textField: "smallAreaName", parentFileds: "carBrandCode", component: () => import("@/components/org/BigAreaNew"), type: "propus", isMust: true }, -
小区
- 小区与品牌、大区联动 parentFileds: “bigAreaId|carBrandCode”
{ compKey: "compKey6", labelName: this.$t("org.label.smallAreaName"), // 小区 codeField: "smallAreaId", parentFileds: "bigAreaId|carBrandCode", component: () => import("@/components/org/SmallAreaNew"), type: "dropdownList", isMust: true }, -
经销商（与品牌联动）
- 车系
- 车系与品牌联动 parentFileds: “carBrandCode”
- 车系多选 isMul: true
{ compKey: "compKey2", labelName: this.$t("ve.label.carSeriseName"), // 车系 codeField: "carSeriesCode", textField: "carSeriesCn", parentFileds: "carBrandCode", component: () => import("@/components/se/chooseCarSeriesSelect.vue"), type: "dropdownList", filterable: true, isMust: true, isMul: true },
-
车型（与车系联动）
- 车型与车系联动
- 有车系时在车系change中清空form中的车型选中值
- 选择车型清空可采购车型编码
{ compKey: 'compKey7', labelName: '车型' /* 基础车型*/, codeField: 'stdCarId', parentFileds: 'value:carBrandCode|carSeriesId', component: () => import('@/components/org/basisCarType'), change: (val) => { this.formField.carConfigCode = ""; }, type: 'propus', isMust: true },
-
内饰颜色
- 先选择车型，与车型联动
{ compKey: 'compKey9', labelName: this.$t('org.label.carIncolor'), // 内饰色 codeField: 'carIncolorId', parentFileds: 'stdCarId', mustFields: 'stdCarId', component: () => import('@/components/org/carIncolor'), type: 'propus', dataToObject: { pageSize: -1, isShow: false }, isMust: true },
-
选装包（先选车型）
- 先选择车型，与车型联动
{ compKey: 'compKey10', labelName: this.$t('ve.label.optional') /* 选装包*/, codeField: 'optionalPackId', parentFileds: 'stdCarId', otherField: 'optionalPackId,optionalPackCn', mustFields: 'stdCarId', component: () => import('@/components/org/basicCarOptionalPack'), type: 'propus', isMust: true }, -
可采购车型编码
- 选中车型时，清空可采购车型编码
{ compKey: 'compKey4', // label: this.$t('org.label.carTypeall'), label: '可采购车型编码', codeField: 'carConfigId', textField: 'carConfig', otherField: 'carConfigCode', parentFileds: "carSeriesId|stdCarId-stdCarId|stdCarCn-stdCarCn", // otherField: "carSeriesId,carSeriesCn,stdCarCn,smallCarTypeId-stdCarId,carConfigId,carConfigCode-carConfig", isComponent: true, component: () => import('@/components/org/carTypeConfig/New'), type: 'propus', isMust: true, sendCode: () => {}, emitCode: () => {}, focusCode: () => {}, dataToObject: { isNotRequireBrand: true } }, -
当前处理人
{ compKey: "compKey16", labelName: "当前处理人", codeField: "employeeid", oFields: "empId,empName", options: [], component: () => import("@/components/org/LookupValue"), type: "dropdownList", isMul: true, isMust: true, emitCode: () => {}, changeCode: () => {} }, // 加载当前处理人列表 loadEmpData() { const that = this const apiQueryRow= ["orgName", "empName", "empId", "empCode", "userId", "userName", "updateControlId"] const queryObj = { // 保存 mutation 查询query type: "query", // api配置 apiConfig: seApis.seMdmOrgEmployeeQueryFindAll, // 服务顾问 apiServices: [{ apiQueryRow: apiQueryRow }], variables: { // 当前中台使用的名称有dataInfo、info，具体查看API文档 dataInfo: { appPost:'SL,CSL,SA', dlrId: this.$store.getters.orgInfo.DLR_ID, isMultiple: '1', // 多选 isEnable: "1", // 在职 } }, }; // 转换了中台请求格式数据 var paramD = that.$getParams(queryObj); // 调用中台API方法（可复用） that.$requestGraphQL(paramD).then((response) => { const msg = response.data[queryObj.apiConfig.ServiceCode].msg if (response.data[queryObj.apiConfig.ServiceCode].result === "1") { let followEmpArr = response.data[queryObj.apiConfig.ServiceCode].rows; this.tableComponents.find(v=>v.codeField=='employeeid').options = followEmpArr } else { that.$message({ message: msg, type: "warning", duration: 2000, }); } }); },
- 日期选择器、月份选择器（单）
- dateType: 默认为 date 可设置为 month 为只选择月份的选择器
{ compKey: "compKey9", labelName: this.$t("ve.label.auditDateBegin") /*分配开始日期*/, codeField: "assignDateBegin", component: () => import("@/components/org/datePicker/datePicker"), type: "datePicker", dateType: "date", dateOptionsType: "0", isMust: false },
-
日期选择器（双）
- format: 默认为 YYYY-MM-DD HH:mm:ss 也可设置为 YYYY-MM-DD
- dataToObject.timer：为 true 时则开启默认显示日期
- dataToObject.hebdomadTime: 为 true 默认一周范围时间
- dataToObject.thirtyTime: 为 true 默认 30 天范围时间
- dataToObject.hhmmss: 默认为 false 有时分秒 为 true 没有时分秒
{ compKey: "compKey60", labelName: "申请时间", codeField: "applyTimeBegin,applyTimeEnd", component: () => import("@/components/org/datePicker/twoDatePicker"), format: "YYYY-MM-DD HH:mm:ss", dataToObject: { timer: true, hebdomadTime: true, hhmmss: true, }, type: "twoDatePicker", dateOptionsType: "0", isMust: true, emitCode: () => {}, changeCode: () => {}, },
4.表格列表配置
- 操作及禁用
- 定义 slot 【isSlot: true】
{ prop: "controlBtn", label: "操作", codeField: "controlBtn", width: 120, align: "center", fixed: true, isSlot: true, }- 使用 slot
<!-- 操作 --> <template #controlBtn="scope" > <!-- 申请单据状态(1:待提交;2:已提交;3:审核通过;4:驳回;5:已取消;6:作废) --> <span :class="['3','5','6'].includes(scope.row.applyStatus) ? 'disabled' : 'link'" @click="handleOperation(scope.row, 1)" > 取消 </span> <span :class="['2','3','6'].includes(scope.row.applyStatus) ? 'disabled' : 'link'" @click="handleOperation(scope.row, 2)" > 作废 </span> </template> - 多选
- 多选配置代码
<one-table-template ref="multipleTable" :dynamicIsShowSelect="true" :selectable="getSelectable" >- 多选禁用条件
getSelectable(row, index) { return !(['2', '3', '6', '5'].includes(row.applyStatus)) },- 获取多选选中的数据
let rows = this.$refs.multipleTable.$refs.multipleTable.selection || []; if (rows.length === 0) { return this.$message('请先选择数据') }
4.常用代码
- 经销商专营店判断（如：查询条件中经销商和专营店的查询条件不同）
checkDir() { if (this.$store.getters.orgInfo.DLR_ID !== "HOST") { this.tableComponents = this.tableComponents.filter((item) => !["carBrandCode", "bigAreaId", "smallAreaId", "dlrCode", "dlrId"].includes(item.codeField)); this.tableCols = this.tableCols.filter((item) => !["carBrandName","bigAreaName","smallAreaName","dlrNamae","dlrCode"].includes(item.prop)); this.formField.dlrName = this.$store.getters.orgInfo.DLR_NAME; this.formField.dlrId = this.$store.getters.orgInfo.DLR_ID; this.formField.dlrCode = this.$store.getters.orgInfo.DLR_CODE; } },- 当前处理人
{ compKey: "compKey16", labelName: "当前处理人", codeField: "employeeid", oFields: "empId,empName", options: [], component: () => import("@/components/org/LookupValue"), type: "dropdownList", isMul: true, isMust: true, emitCode: () => {}, changeCode: () => {} }, // 加载当前处理人列表 loadEmpData() { const that = this const apiQueryRow= ["orgName", "empName", "empId", "empCode", "userId", "userName", "updateControlId"] const queryObj = { // 保存 mutation 查询query type: "query", // api配置 apiConfig: seApis.seMdmOrgEmployeeQueryFindAll, // 服务顾问 apiServices: [{ apiQueryRow: apiQueryRow }], variables: { // 当前中台使用的名称有dataInfo、info，具体查看API文档 dataInfo: { appPost:'SL,CSL,SA', dlrId: this.$store.getters.orgInfo.DLR_ID, isMultiple: '1', // 多选 isEnable: "1", // 在职 } }, }; // 转换了中台请求格式数据 var paramD = that.$getParams(queryObj); // 调用中台API方法（可复用） that.$requestGraphQL(paramD).then((response) => { const msg = response.data[queryObj.apiConfig.ServiceCode].msg if (response.data[queryObj.apiConfig.ServiceCode].result === "1") { let followEmpArr = response.data[queryObj.apiConfig.ServiceCode].rows; this.tableComponents.find(v=>v.codeField=='employeeid').options = followEmpArr } else { that.$message({ message: msg, type: "warning", duration: 2000, }); } }); }, - 主要参数：
4167
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
