| | |
| | | <template> |
| | | <div> |
| | | <div style="display: flex;flex-wrap: wrap;" v-if="this.crudArrayFlag"> |
| | | <el-button-group> |
| | | <!--新增--> |
| | | <el-button v-if="attrEditVisible == false && attrFlagChiledren==false" size="small" type="primary" icon="el-icon-plus" @click="busineHandle">添加 {{ msg }}</el-button> |
| | | <!-- 全屏编辑--> |
| | |
| | | <el-button icon="el-icon-info" size="small" @click="rulesVisible=true">验证规则</el-button> |
| | | <!-- 属性分组--> |
| | | <el-button icon="el-icon-menu" size="small" @click="attrVisibleHandle">属性分组</el-button> |
| | | </el-button-group> |
| | | <el-button-group> |
| | | <!-- 分类注入--> |
| | | <el-button icon="el-icon-magic-stick" size="small" @click="injectBtn">分类注入</el-button> |
| | | <!-- 组合规则--> |
| | | <el-button size="small" @click="isShowHandler">组合规则</el-button> |
| | | <!-- 枚举注入--> |
| | | <el-button size="small" @click="enmuVisHandle">枚举注入</el-button> |
| | | <!-- 级联属性--> |
| | | <el-button size="small" @click="CascadeHandle">级联属性</el-button> |
| | | <!-- 预览排序--> |
| | | <el-button size="small" icon="el-icon-arrow-down">预览排序</el-button> |
| | | <!-- 分类注入--> |
| | | <el-button icon="el-icon-magic-stick" size="small" @click="injectBtn">分类注入</el-button> |
| | | <!-- 组合规则--> |
| | |
| | | <!-- 级联属性--> |
| | | <el-button size="small" @click="CascadeHandle">级联属性</el-button> |
| | | <!-- 预览排序--> |
| | | <el-button size="small" icon="el-icon-arrow-down">预览排序</el-button> |
| | | </el-button-group> |
| | | <el-button-group> |
| | | <el-button size="small" @click="orderHandle" icon="el-icon-arrow-down">预览排序</el-button> |
| | | <!-- 保存--> |
| | | <el-button size="small" @click="addsHandler" icon="el-icon-check">保存</el-button> |
| | | <!-- 删除--> |
| | |
| | | <!-- 重置--> |
| | | <el-button size="small" @click="reset" icon="el-icon-refresh-right">重置</el-button> |
| | | <!-- 同步到其他模板--> |
| | | <el-button size="small"@click="syncHandle" icon="el-icon-share">同步到其他模板</el-button> |
| | | </el-button-group> |
| | | <el-button size="small" @click="syncHandle">同步到其他模板</el-button> |
| | | <!-- 编码申请预览--> |
| | | <el-button size="small" @click="applicationHandle" style="">编码申请预览</el-button> |
| | | <!-- 验证规则--> |
| | |
| | | </div> |
| | | <el-table :data="ProData" |
| | | style="width: 100%" |
| | | height="280" |
| | | @cell-click="handleCellClicks" |
| | | @select="selectHandle" |
| | | @selection-change="selectionChange" |
| | |
| | | :label="item.label" |
| | | :prop="item.prop" |
| | | :formatter="formAttr" |
| | | :width="item.width||(item.label.length >=4 ?'150':item.label.length==3 ?'120':'90')" |
| | | :width="item.width||(item.label.length >=4 ?'160':item.label.length==3 ?'130':'100')" |
| | | :show-overflow-tooltip="true" |
| | | :sortable="item.sortable" |
| | | align="center" |
| | | > |
| | | <template slot-scope="{ row }"> |
| | | <el-input v-if="editingRows === row && editShows== item.prop && (item.edit == 'text' || item.edit == 'select' ||item.edit == 'refer')" v-model="row[item.prop]" |
| | | <el-input v-if="editingRows === row && editShows== item.prop && item.prop != 'codeDateFormat' && (item.edit == 'text' || item.edit == 'select' ||item.edit == 'refer' )" v-model="row[item.prop]" |
| | | @blur="saveRows"></el-input> |
| | | <el-input-number controls-position="right" v-if="editingRows === row && editShows== item.prop && item.edit == 'number'" v-model="row[item.prop]" |
| | | @blur="saveRows"></el-input-number> |
| | | <el-select v-model="row[item.prop]" slot="prepend" v-if="editingRows === row && editShows== item.prop && item.prop == 'codeDateFormat' && row[item.prop] ==''" @focus="DataChangeHandler"> |
| | | <el-option label="餐厅名" value="1"></el-option> |
| | | <el-option label="订单号" value="2"></el-option> |
| | | <el-option label="用户电话" value="3"></el-option> |
| | | </el-select> |
| | | <el-switch |
| | | v-if="item.edit === 'switch'" v-model="row[item.prop]" active-value="true" |
| | | inactive-value="false"> |
| | | </el-switch> |
| | | <span v-else>{{ row[item.prop] }}</span> |
| | | <span v-else >{{ row[item.prop] }}</span> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column |
| | |
| | | </el-table-column> |
| | | </el-table> |
| | | </div> |
| | | <!-- </avue-crud>--> |
| | | </template> |
| | | |
| | | <script> |
| | | import {AttrByBtm, gridCodeClassifyTemplateAttr, batchAddSave, copyto} from '@/api/template/templateAttr' |
| | | import {AttrByBtm, gridCodeClassifyTemplateAttr, batchAddSave, copyto,listByFlag} from '@/api/template/templateAttr' |
| | | |
| | | export default { |
| | | name: "attrCrud .vue", |
| | |
| | | isShowformulaEdit: false, |
| | | // 级联单选 |
| | | selectRow: '', |
| | | //级联单选数组 |
| | | selectRowArr:[], |
| | | // 级联data |
| | | CascadeData: [], |
| | | // 级联option |
| | |
| | | label: '排序号', |
| | | sortable: true, |
| | | edit: 'number', |
| | | width: 70, |
| | | width: 90, |
| | | fixed: true |
| | | }, { |
| | | label: "属性英文编号", |
| | |
| | | prop: "name", |
| | | fixed: true, |
| | | cell: false, |
| | | width: 125, |
| | | width: 145, |
| | | edit: 'text', |
| | | sortable: true |
| | | }, |
| | |
| | | label: "时间格式", |
| | | prop: "codeDateFormat", |
| | | sortable: true, |
| | | width: 105, |
| | | width: 135, |
| | | edit: 'select', |
| | | cell: false, |
| | | }, |
| | |
| | | VTInteger: "整形", |
| | | VTFilePath: "文件", |
| | | VTString: "字符串" |
| | | } |
| | | }, |
| | | //时间格式下拉框 |
| | | codeDataFlag:false, |
| | | } |
| | | }, |
| | | computed:{ |
| | |
| | | formAttr(row, column) { |
| | | console.log(row,column) |
| | | }, |
| | | //时间下拉格式 |
| | | DataChangeHandler(){ |
| | | debugger |
| | | listByFlag({comboxKey: 'codedateformat', |
| | | id: 'codedateformat', |
| | | namespace: 'codeclstempattr', |
| | | flag: 'dateFormates'}).then(res=>{ |
| | | console.log(res) |
| | | }) |
| | | }, |
| | | //属性分组按钮 |
| | | attrVisibleHandle() { |
| | | |
| | | if (this.attrSelectList.length > 1) { |
| | | this.$message.warning('只能选择一条模板属性') |
| | | } else if (this.attrSelectList < 1) { |
| | |
| | | 'conditionMap[classifyTemplateOid]': this.Formlist[0].oid, |
| | | 'conditionMap[oid_notequal]': this.attrOid |
| | | }).then(res => { |
| | | console.log(res) |
| | | this.CascadeData = res.data.data; |
| | | }) |
| | | } |
| | | }, |
| | | //级联保存 |
| | | CascadeAddHandle() { |
| | | let CascadeString = ""; |
| | | CascadeString = this.selectRowArr.id + (this.selectRowArr.name); |
| | | this.$set(this.attrRow, 'parentCode', CascadeString) |
| | | this.CascadeVisible = false; |
| | | }, |
| | | //级联属性清除 |
| | | casRemove() { |
| | | this.selectRow = "" |
| | | }, |
| | | // 级联属性行单选 |
| | | CascaderowClick(row) { |
| | | this.selectRow = row.$index; |
| | | this.selectRowArr=row |
| | | }, |
| | | //表格单选 |
| | | selectHandle(selection, row) { |
| | | this.attrOid = row.oid; |
| | | this.attrRow = row; |
| | | console.log(row) |
| | | }, |
| | | //表格选择 |
| | | selectionChange(list) { |
| | |
| | | this.$message.success('保存成功') |
| | | }) |
| | | }, |
| | | //级联保存 |
| | | CascadeAddHandle() { |
| | | let CascadeString = ""; |
| | | CascadeString = this.attrRow.id + (this.attrRow.name); |
| | | this.$set(this.attrRow, 'parentCode', CascadeString) |
| | | this.CascadeVisible = false; |
| | | }, |
| | | //级联属性清除 |
| | | casRemove() { |
| | | this.selectRow = "" |
| | | }, |
| | | // 级联属性行单选 |
| | | CascaderowClick(row) { |
| | | this.selectRow = row.$index |
| | | }, |
| | | |
| | | //表格行编辑 |
| | | handleCellClicks(row, column) { |
| | | this.editingRows = row; |
| | | this.editShows = column.property; |
| | | this.rowOid = row.oid; |
| | | console.log(row,column) |
| | | if(column.property == 'codeDateFormat' ){ |
| | | |
| | | } |
| | | }, |
| | | saveRows() { |
| | | this.editingRows = null; |
| | | console.log('1321') |
| | | }, |
| | | // 枚举注入添加一行空数据 |
| | | addRow() { |
| | |
| | | }, |
| | | //分类注入保存 |
| | | injectAddHandle() { |
| | | this.$set(this.attrRow, 'classifyInvokeLevel', this.injectOption); |
| | | let data = { |
| | | "注入类型": this.injectOption.type, |
| | | "注入类型名称": this.injectOption.set, |
| | | "层级设置": this.injectOption.injectNum, |
| | | "是否可修改": this.injectOption.change |
| | | } |
| | | console.log(this.injectOption) |
| | | this.$set(this.attrRow, 'classifyInvokeLevel', data); |
| | | this.injectVisible = false |
| | | }, |
| | | //分类注入清空 |
| | |
| | | this.injectVisible = false |
| | | }, |
| | | //属性模板表格单元格点击事件 |
| | | handleRowClick(row, column, cell, event) { |
| | | //判断点击不是操作栏才可执行 |
| | | if (column.property != "menu") { |
| | | // 当前行变为可编辑状态 |
| | | this.rowList = row |
| | | row.$cellEdit = true |
| | | // 每一个单元格加上cell为true才是编辑状态 |
| | | //拿到每个columnKey,点击时设置为true,就实现单元格编辑状态了 |
| | | this.rowCellList = this.findObject(this.option.column, column.columnKey) |
| | | this.rowCellList.cell = true |
| | | if (this.List.indexOf(column.columnKey) == -1) { |
| | | this.List.push(column.columnKey) |
| | | } |
| | | // if(this.List.length >= 2){ |
| | | // const cellName=this.List[0] |
| | | // |
| | | // } |
| | | } |
| | | }, |
| | | //表格操作栏删除 |
| | | CrudRowDel(row) { |
| | | this.ProData.splice(row.$index, 1) |
| | | }, |
| | | //表格删除 |
| | | CrudRemove() { |
| | | this.attrSelectList.forEach((item)=>{ |
| | | this.ProData.splice(item.$index, 1) |
| | | }) |
| | | |
| | | this.ProData.splice(this.attrRow.$index, 1) |
| | | }, |
| | | //表格重置 |
| | | reset() { |