| | |
| | | <div style="display: flex;justify-content: center"> |
| | | <span style="display: flex;align-items: center; margin-right: 5px;"> |
| | | <p class="tableTopLabel">名称:</p> |
| | | <el-input v-model="topForm.viName" placeholder="请输入内容" size="mini"></el-input> |
| | | <el-input v-model="topForm.viName" placeholder="请输入名称" size="mini"></el-input> |
| | | </span> |
| | | |
| | | <span style="display: flex;align-items: center; margin-right: 5px;"> |
| | | <p class="tableTopLabel">查询模板名称:</p> |
| | | <el-input v-model="form.itemQtName" placeholder="请输入查询模板名称" size="mini"></el-input> |
| | | <el-select v-model="form.itemQtName" placeholder="请选择查询模板" size="mini"> |
| | | <el-option v-for="(item,index) in searchQtNameList" :key="index" :label="item.qtName" |
| | | :value="item.qtName"></el-option> |
| | | </el-select> |
| | | </span> |
| | | |
| | | <span style="display: flex;align-items: center; margin-right: 5px;"> |
| | |
| | | <el-form-item :class="['hiddenLabel', { 'active-border': activeItem.text === item.text }]" |
| | | :label="item.text + ':'" |
| | | style="padding-left: 5px" @click.native="formItemClick(item,index)"> |
| | | <el-input v-model="item.value" :placeholder="item.text" size="mini"></el-input> |
| | | <el-input |
| | | v-if="item.itemType === 'text' || |
| | | item.itemType === 'custom' || |
| | | item.itemType === 'customform'|| |
| | | item.itemType === 'hidden' || |
| | | item.itemType === 'specialCharacter'" |
| | | v-model="item.value" :placeholder="item.text" |
| | | size="mini"></el-input> |
| | | |
| | | <div v-if="item.itemType === 'textbtn'" style="display: flex;align-items: center"> |
| | | <el-input v-model="item.value" :placeholder="item.text" size="mini"></el-input> |
| | | <el-button icon="el-icon-edit" plain size="mini" style="height: 28px;" |
| | | type="primary"></el-button> |
| | | </div> |
| | | |
| | | <el-input |
| | | v-if="item.itemType === 'textarea' || item.itemType === 'richtext' || item.itemType === 'webeditor'" |
| | | v-model="item.value" |
| | | :placeholder="item.text" |
| | | :rows="2" |
| | | type="textarea"> |
| | | </el-input> |
| | | |
| | | <el-input-number v-if="item.itemType === 'number'" v-model="item.value" :max="99999" |
| | | :min="1"></el-input-number> |
| | | <el-input v-if="item.itemType === 'password'" v-model="input" placeholder="请输入密码" |
| | | show-password></el-input> |
| | | <el-radio v-if="item.itemType === 'radio'" v-model="item.value"></el-radio> |
| | | <el-checkbox v-if="item.itemType === 'checkbox'" v-model="item.value"></el-checkbox> |
| | | <el-select v-if="item.itemType === 'select' || item.itemType === 'multiselect'" |
| | | v-model="item.value" :disabled="true" placeholder="请选择" size="mini"> |
| | | </el-select> |
| | | <el-date-picker |
| | | v-if="item.itemType === 'date' || item.itemType === 'datetime'" |
| | | v-model="item.value" |
| | | :placeholder="item.itemType === 'date' ? '请选择日期' : '请选择日期时间'" |
| | | type="date"> |
| | | </el-date-picker> |
| | | |
| | | <el-time-select |
| | | v-if="item.itemType === 'time'" |
| | | v-model="item.value" |
| | | :picker-options="{ |
| | | start: '08:30', |
| | | step: '00:15', |
| | | end: '18:30' |
| | | }" |
| | | placeholder="选择时间"> |
| | | </el-time-select> |
| | | <el-button v-if="item.itemType === 'file'" |
| | | v-model="item.value" plain size="mini" type="primary"> |
| | | 上传文件 |
| | | </el-button> |
| | | <el-button v-if="item.itemType === 'multiFile'" |
| | | v-model="item.value" plain size="mini" type="primary"> |
| | | 多文件上传 |
| | | </el-button> |
| | | |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | |
| | | </el-button> |
| | | <el-button icon="el-icon-plus" plain size="small" type="primary" @click="addCustomClickHandler">添加自定义组件 |
| | | </el-button> |
| | | <el-button icon="el-icon-zoom-in" plain size="small" type="primary">预览</el-button> |
| | | <el-button icon="el-icon-zoom-in" plain size="small" type="primary" @click="checkViewHandler">预览 |
| | | </el-button> |
| | | </div> |
| | | </basic-container> |
| | | </el-main> |
| | | |
| | | <el-aside width="25%"> |
| | | <basic-container> |
| | | <div style="height: 700px; overflow-y: auto;padding-right: 10px"> |
| | | <div style="height: 660px; overflow-y: auto;padding-right: 10px"> |
| | | <h3>设置</h3> |
| | | <el-form ref="form" :model="form" :rules="rules" label-position="left" label-width="85px"> |
| | | <el-row style="border-bottom: 1px solid #878585;padding-bottom: 10px"> |
| | | <el-col :span="24"> |
| | | <el-form-item label="使用字段"> |
| | | <div style="display: flex"> |
| | | <el-input v-model="form.text" placeholder="请输入使用字段" size="mini"></el-input> |
| | | <el-input v-model="form.text" :readonly="true" placeholder="请输入使用字段" size="mini"></el-input> |
| | | <el-checkbox v-model="form.itemIsEditable" style="margin-left: 5px; margin-right: 5px">只读 |
| | | </el-checkbox> |
| | | <el-checkbox v-model="form.itemIsRequired" style="margin-left: 5px;margin-right: 0px">必填 |
| | |
| | | |
| | | <el-col :span="12"> |
| | | <el-form-item class="rightLabel" label="显示类型"> |
| | | <el-select v-model="form.itemType" placeholder="请选择类型" size="mini"> |
| | | <el-select v-model="form.itemType" placeholder="请选择类型" size="mini" @change="itemTypeChange"> |
| | | <el-option v-for="(item,index) in showSelectList" :key="index" :label="item.label" |
| | | :value="item.value"></el-option> |
| | | </el-select> |
| | |
| | | <el-form-item label="权限控制"> |
| | | <div style="display: flex;align-items: center"> |
| | | <el-input v-model="form.itemRight" placeholder="请输入内容" size="mini"></el-input> |
| | | <el-button plain size="mini" style="margin-left: 3px" type="success">选择</el-button> |
| | | <el-button plain size="mini" style="margin-left: 3px" type="success" @click="authClickHandler"> |
| | | 选择 |
| | | </el-button> |
| | | </div> |
| | | </el-form-item> |
| | | </el-col> |
| | |
| | | <el-form-item> |
| | | <div style="height: 150px; width: 100%; border: 1px solid #bdbbbb;overflow-y: auto"> |
| | | <el-table |
| | | :data="form.itemValueList" |
| | | :data="form.itemKeyValueList" |
| | | :highlight-current-row="true" |
| | | :show-header="false" |
| | | border |
| | |
| | | |
| | | </el-form> |
| | | </div> |
| | | <div style="display: flex;justify-content: right"> |
| | | <el-button plain size="mini" style="margin-top: 10px" type="success" @click="asideFormHandler">应用 |
| | | </el-button> |
| | | </div> |
| | | </basic-container> |
| | | </el-aside> |
| | | </div> |
| | |
| | | append-to-body="true" |
| | | class="avue-dialog" |
| | | title="表单" |
| | | width="40%" |
| | | width="50%" |
| | | @close="closeCustomDialog"> |
| | | <el-form ref="form" :model="customForm" :rules="rules" label-position="left" label-width="85px"> |
| | | <el-row style="border-bottom: 1px solid #878585;padding-bottom: 10px"> |
| | | <el-col :span="24"> |
| | | <el-form-item label="使用字段"> |
| | | <div style="display: flex"> |
| | | <el-input v-model="customForm.text" placeholder="请输入使用字段" size="mini"></el-input> |
| | | <div style="display: flex;align-items: center"> |
| | | <div style="display: flex;align-items: center"> |
| | | <el-input v-model="customForm.text" placeholder="请输入使用字段" size="mini"></el-input> |
| | | <el-button plain size="mini" style="margin-left: 3px" type="success" @click="customTextHandler">选择 |
| | | </el-button> |
| | | </div> |
| | | <el-checkbox v-model="customForm.itemIsEditable" style="margin-left: 5px; margin-right: 5px">只读 |
| | | </el-checkbox> |
| | | <el-checkbox v-model="customForm.itemIsRequired" style="margin-left: 5px;margin-right: 0px">必填 |
| | |
| | | |
| | | <el-col :span="12"> |
| | | <el-form-item class="rightLabel" label="显示类型"> |
| | | <el-select v-model="customForm.itemType" placeholder="请选择类型" size="mini"> |
| | | <el-select v-model="customForm.itemType" placeholder="请选择类型" size="mini" @change="customItemTypeChange"> |
| | | <el-option v-for="(item,index) in showSelectList" :key="index" :label="item.label" |
| | | :value="item.value"></el-option> |
| | | </el-select> |
| | |
| | | </el-col> |
| | | |
| | | <el-col :span="24"> |
| | | <el-form-item label="权限控制"> |
| | | <el-form-item label="属性权限"> |
| | | <div style="display: flex;align-items: center"> |
| | | <el-input v-model="customForm.itemRight" placeholder="请输入内容" size="mini"></el-input> |
| | | <el-button plain size="mini" style="margin-left: 3px" type="success">选择</el-button> |
| | | <el-button plain size="mini" style="margin-left: 3px" type="success" @click="customAuthClickHandler"> |
| | | 选择 |
| | | </el-button> |
| | | </div> |
| | | </el-form-item> |
| | | </el-col> |
| | |
| | | |
| | | </el-row> |
| | | |
| | | <el-row style="margin-top: 10px;border-bottom: 1px solid #878585;padding-bottom: 10px"> |
| | | <el-row v-if="customForm.itemType ? customOptionTypeStatus : true" |
| | | style="margin-top: 10px;border-bottom: 1px solid #878585;padding-bottom: 10px"> |
| | | <h4>选项列表</h4> |
| | | <el-col :span="12"> |
| | | <el-form-item label="名称"> |
| | |
| | | <el-form-item> |
| | | <div style="height: 150px; width: 100%; border: 1px solid #bdbbbb;overflow-y: auto"> |
| | | <el-table |
| | | :data="customForm.itemValueList" |
| | | :data="customForm.itemKeyValueList" |
| | | :highlight-current-row="true" |
| | | :show-header="false" |
| | | border |
| | |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row style="margin-top: 10px"> |
| | | <el-row v-if="customForm.itemType ? customItemStyleTypeStatus : true" style="margin-top: 10px"> |
| | | <el-col :span="24" style="height: 90px"> |
| | | <el-form-item label="附加属性"> |
| | | <el-input |
| | |
| | | </el-form> |
| | | <span slot="footer" class="dialog-footer"> |
| | | <el-button @click="customVisible = false">取 消</el-button> |
| | | <el-button type="primary">确 定</el-button> |
| | | <el-button type="primary" @click="customSaveHandler">确 定</el-button> |
| | | </span> |
| | | </el-dialog> |
| | | <!-- 添加自定义组件选择属性池属性对话框 --> |
| | | <el-dialog |
| | | v-dialogDrag |
| | | :visible.sync="customAttrVisible" |
| | | append-to-body="true" |
| | | class="avue-dialog" |
| | | title="选择属性" |
| | | width="50%"> |
| | | <avue-crud |
| | | ref="userCrud" |
| | | :data="customAttrData" |
| | | :option="customAttrOption" |
| | | :page.sync="page" |
| | | :table-loading="customAttrLoading" |
| | | @row-click="customAttrRowClickHandler" |
| | | > |
| | | </avue-crud> |
| | | <span slot="footer" class="dialog-footer"> |
| | | <el-button @click="customAttrVisible = false">取 消</el-button> |
| | | <el-button type="primary" @click="customAttrSaveHandler">确 定</el-button> |
| | | </span> |
| | | </el-dialog> |
| | | <!-- 预览 --> |
| | | <el-dialog |
| | | v-dialogDrag |
| | | :visible.sync="checkViewVisible" |
| | | append-to-body="true" |
| | | class="avue-dialog" |
| | | title="预览" |
| | | width="80%"> |
| | | <el-form ref="form" :model="form" :rules="rules" label-width="100px"> |
| | | <el-row> |
| | | <el-col v-for="(item,index) in formList" :key="index" :span="topForm.columnNumber"> |
| | | <el-form-item :class="['hiddenLabel', { 'active-border': activeItem.text === item.text }]" |
| | | :label="item.itemName + ':'" |
| | | style="padding-left: 5px" @click.native="formItemClick(item,index)"> |
| | | <el-input |
| | | v-if="item.itemType === 'text' || |
| | | item.itemType === 'custom' || |
| | | item.itemType === 'customform'|| |
| | | item.itemType === 'hidden' || |
| | | item.itemType === 'specialCharacter'" |
| | | v-model="item.value" :placeholder="item.text" |
| | | size="mini"></el-input> |
| | | |
| | | <div v-if="item.itemType === 'textbtn'" style="display: flex;align-items: center"> |
| | | <el-input v-model="item.value" :placeholder="item.text" size="mini"></el-input> |
| | | <el-button icon="el-icon-edit" plain size="mini" style="height: 28px;" |
| | | type="primary"></el-button> |
| | | </div> |
| | | |
| | | <el-input |
| | | v-if="item.itemType === 'textarea' || item.itemType === 'richtext' || item.itemType === 'webeditor'" |
| | | v-model="item.value" |
| | | :placeholder="item.text" |
| | | :rows="2" |
| | | type="textarea"> |
| | | </el-input> |
| | | |
| | | <el-input-number v-if="item.itemType === 'number'" v-model="item.value" :max="99999" |
| | | :min="1"></el-input-number> |
| | | <el-input v-if="item.itemType === 'password'" v-model="input" placeholder="请输入密码" |
| | | show-password></el-input> |
| | | <el-radio v-if="item.itemType === 'radio'" v-model="item.value"></el-radio> |
| | | <el-checkbox v-if="item.itemType === 'checkbox'" v-model="item.value"></el-checkbox> |
| | | <el-select v-if="item.itemType === 'select' || item.itemType === 'multiselect'" |
| | | v-model="item.value" :disabled="true" placeholder="请选择" size="mini"> |
| | | </el-select> |
| | | <el-date-picker |
| | | v-if="item.itemType === 'date' || item.itemType === 'datetime'" |
| | | v-model="item.value" |
| | | :placeholder="item.itemType === 'date' ? '请选择日期' : '请选择日期时间'" |
| | | type="date"> |
| | | </el-date-picker> |
| | | |
| | | <el-time-select |
| | | v-if="item.itemType === 'time'" |
| | | v-model="item.value" |
| | | :picker-options="{ |
| | | start: '08:30', |
| | | step: '00:15', |
| | | end: '18:30' |
| | | }" |
| | | placeholder="选择时间"> |
| | | </el-time-select> |
| | | <el-button v-if="item.itemType === 'file'" |
| | | v-model="item.value" plain size="mini" type="primary"> |
| | | 上传文件 |
| | | </el-button> |
| | | <el-button v-if="item.itemType === 'multiFile'" |
| | | v-model="item.value" plain size="mini" type="primary"> |
| | | 多文件上传 |
| | | </el-button> |
| | | |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | </el-form> |
| | | </el-dialog> |
| | | |
| | | <el-dialog |
| | | v-dialogDrag |
| | | :visible.sync="authVisible" |
| | | append-to-body="true" |
| | | class="avue-dialog" |
| | | title="权限控制-人员列表" |
| | | width="60%" |
| | | @close="authDialogClose"> |
| | | <div style="height: 650px"> |
| | | <div style="height: 600px;"> |
| | | <avue-tree :key="refresh" ref="authTree" v-model="treeAuthForm" :data="treeAuthData" :option="treeAuthOption" |
| | | @check-change="treeAuthCheckChange"> |
| | | <span slot-scope="{ node, data }" class="el-tree-node__label"> |
| | | <span style="font-size: 15px"> |
| | | <i class="el-icon-s-promotion"></i> |
| | | {{ (node || {}).label }} |
| | | </span> |
| | | </span> |
| | | </avue-tree> |
| | | </div> |
| | | </div> |
| | | <span slot="footer" class="dialog-footer"> |
| | | <el-button @click="authDialogClose">取 消</el-button> |
| | | <el-button type="primary" @click="authDialogSaveHandler">确 定</el-button> |
| | | </span> |
| | | </el-dialog> |
| | | </el-dialog> |
| | | </template> |
| | | |
| | | <script> |
| | | import {getTreeAttributes} from "@/api/UI/formDefine/api"; |
| | | import {getObjTypeQTs, getTreeAttributes, savePortalVI, refPersonOrgTree} from "@/api/UI/formDefine/api"; |
| | | import func from "@/util/func"; |
| | | import basicOption from "@/util/basic-option"; |
| | | import {gridAttribute} from "@/api/modeling/attributePool/api"; |
| | | import {getSysModelTreeMenuByPID} from "@/api/systemModel/mangeModel/api"; |
| | | |
| | | export default { |
| | | name: "formDialog", |
| | |
| | | treeRadio: { |
| | | type: String, |
| | | default: "" |
| | | }, |
| | | editRow: { |
| | | type: Object, |
| | | default: () => { |
| | | } |
| | | } |
| | | }, |
| | | data() { |
| | | return { |
| | | authType: 'default', |
| | | refresh: Math.random(), |
| | | treeAuthOption: { |
| | | multiple: true, |
| | | height: 'auto', |
| | | menu: false, |
| | | addBtn: false, |
| | | defaultExpandAll: true, |
| | | lazy: true, |
| | | props: { |
| | | label: 'text', |
| | | value: 'oid', |
| | | children: 'childNodes', |
| | | }, |
| | | treeLoad: (node, resolve) => { |
| | | // console.log(node); |
| | | const params = { |
| | | 'conditionMap[dataType]': node.data.data, |
| | | 'conditionMap[parentId]': node.data.data, |
| | | 'conditionMap[orgType]': 'all' |
| | | } |
| | | refPersonOrgTree(node.level === 0 ? {} : params).then(res => { |
| | | resolve(res.data.treeData.map(item => { |
| | | return { |
| | | ...item, |
| | | id: item.id, |
| | | name: item.name, |
| | | leaf: item.leaf |
| | | } |
| | | })) |
| | | }) |
| | | } |
| | | }, |
| | | treeAuthData: [], |
| | | treeAuthForm: {}, |
| | | authVisible: false, |
| | | searchQtNameList: [], |
| | | customAttrRow: {}, |
| | | customAttrOption: { |
| | | ...basicOption, |
| | | calcHeight: -60, |
| | | addBtn: false, |
| | | editBtn: false, |
| | | delBtn: false, |
| | | menu: false, |
| | | refreshBtn: false, |
| | | highlightCurrentRow: true, |
| | | selection: false, |
| | | column: [ |
| | | { |
| | | label: '属性名', |
| | | prop: 'id', |
| | | sortable: true, |
| | | }, |
| | | { |
| | | label: '标签', |
| | | prop: 'name', |
| | | sortable: true, |
| | | }, |
| | | { |
| | | label: '类型', |
| | | prop: 'attributeDataTypeText', |
| | | sortable: true, |
| | | width: 100 |
| | | }, |
| | | { |
| | | label: '默认值', |
| | | prop: 'defaultValue', |
| | | sortable: true, |
| | | width: 120 |
| | | }, |
| | | { |
| | | label: '描述', |
| | | prop: 'description', |
| | | overHidden: true, |
| | | }, |
| | | ] |
| | | }, |
| | | customAttrData: [], |
| | | customAttrLoading: false, |
| | | customAttrVisible: false, |
| | | checkViewVisible: false, |
| | | optionObj: { |
| | | optionName: '', |
| | | optionValue: '' |
| | |
| | | optionValue: '' |
| | | }, |
| | | customForm: { |
| | | itemValueList: [], |
| | | itemKeyValueList: [], |
| | | itemCols: '1' |
| | | }, |
| | | customLoading: false, |
| | | customVisible: false, |
| | |
| | | form: {}, |
| | | topForm: { |
| | | columnNumber: 8, |
| | | showColumn: '', |
| | | showColumn: '3', |
| | | viName: '', |
| | | position: '' |
| | | }, |
| | |
| | | itemStyleTypeStatus() { |
| | | const types = ['hidden', 'webeditor', 'radio', 'checkbox']; |
| | | return !types.includes(this.form.itemType); // 不展示 |
| | | } |
| | | }, |
| | | customOptionTypeStatus() { |
| | | const types = ['radio', 'checkbox', 'select']; |
| | | return types.includes(this.customForm.itemType); // 展示 |
| | | }, |
| | | customItemStyleTypeStatus() { |
| | | const types = ['hidden', 'webeditor', 'radio', 'checkbox']; |
| | | return !types.includes(this.customForm.itemType); // 不展示 |
| | | }, |
| | | }, |
| | | created() { |
| | | // this.getTreeList(); |
| | |
| | | // 关闭对话框 |
| | | closeDialog() { |
| | | this.formList = []; |
| | | |
| | | this.form = {}; |
| | | this.activeItem = {}; |
| | | this.topForm.viName = ""; |
| | | }, |
| | | |
| | | getTreeList() { |
| | |
| | | this.treeLoading = false; |
| | | } |
| | | }) |
| | | this.getSearchSelectList(); |
| | | }, |
| | | |
| | | // 开始拖拽树节点事件 |
| | |
| | | const params = { |
| | | text: data.text, |
| | | oid: data.oid, |
| | | itemType: 'text', |
| | | itemName: data.data.name |
| | | } |
| | | console.log(data); |
| | | const isDuplicate = this.formList.some(item => item.text === data.text); |
| | | |
| | | if (isDuplicate) { |
| | |
| | | this.activeItem = item; |
| | | this.activeItemIndex = index; |
| | | this.form = {...item}; |
| | | console.log(item); |
| | | |
| | | // console.log(item,index); |
| | | this.topForm.position = index += 1; |
| | | }, |
| | | |
| | | // 设置显示行数 |
| | |
| | | |
| | | // 选项添加 |
| | | optionAddClickHandler(val) { |
| | | let optionObj, itemValueList; |
| | | let optionObj, itemKeyValueList; |
| | | |
| | | if (val === 'dialog') { |
| | | optionObj = this.customOptionObj; |
| | | itemValueList = this.customForm.itemValueList; |
| | | itemKeyValueList = this.customForm.itemKeyValueList; |
| | | } else { |
| | | if (func.isEmptyObject(this.activeItem)) { |
| | | this.$message.error('请选择一条数据进行添加选项'); |
| | | return; |
| | | } |
| | | optionObj = this.optionObj; |
| | | itemValueList = this.form.itemValueList; |
| | | itemKeyValueList = this.form.itemKeyValueList; |
| | | } |
| | | |
| | | if (!optionObj.optionName) { |
| | |
| | | value: optionObj.optionValue |
| | | }; |
| | | |
| | | itemValueList.push(params); |
| | | itemKeyValueList.push(params); |
| | | }, |
| | | |
| | | // 选项删除 |
| | |
| | | // 保存按钮 |
| | | saveClickHandler() { |
| | | if (!this.topForm.viName) { |
| | | this.$message.error('名称不能为空'); |
| | | this.$message.error('表单名称不能为空'); |
| | | return; |
| | | } |
| | | if (this.formList.length <= 0) { |
| | | this.$message.error('页面不能为空'); |
| | | this.$message.error('页面定义不能为空'); |
| | | return; |
| | | } |
| | | this.visible = false; |
| | | this.$message.success('保存成功'); |
| | | this.formList = this.formList.map(item => { |
| | | return { |
| | | ...item, |
| | | itemField: item.text // 将itemField赋值为text,因为忘记父组件为什么在编辑回填时把itemField赋值为text了 |
| | | }; |
| | | }); |
| | | const params = { |
| | | id: this.editRow.id,// 修改时候必传 |
| | | typeFlag: this.treeRadio, // 业务类型0 or 链接类型1 |
| | | typeFlagText: this.treeRadio === '0' ? '业务类型的表单' : '链接类型的表单',// 业务类型显示值 |
| | | typeName: this.treeRadio === '0' ? this.TreeNodeRow.id : this.TreeNodeRow.name, // 业务类型名 or 链接类型名 |
| | | viName: this.topForm.viName, // 视图名称 |
| | | viType: 1, // 视图类型 |
| | | viTypeText: "表单", // 视图中文名称 |
| | | prm: { |
| | | formQtName: '', // 查询模板名称 |
| | | showCols: this.topForm.showColumn, |
| | | prmItemList: this.formList |
| | | }, |
| | | } |
| | | savePortalVI(params).then(res => { |
| | | if (res.data.code === 200) { |
| | | this.$message.success(res.data.obj); |
| | | this.visible = false; |
| | | this.closeDialog(); |
| | | } |
| | | }) |
| | | // this.visible = false; |
| | | // this.$message.success('保存成功'); |
| | | }, |
| | | |
| | | // 修改显示类型 |
| | | itemTypeChange(val) { |
| | | if (val) { |
| | | this.clearFormBottom(); |
| | | } |
| | | if (!this.form.text) { |
| | | this.$message.error('请在右侧选择数据后进行操作!'); |
| | | return; |
| | | } |
| | | |
| | | }, |
| | | |
| | | // 自定义组件修改显示类型 |
| | | customItemTypeChange(val) { |
| | | if (val) { |
| | | this.customClearFormBottom(); |
| | | } |
| | | }, |
| | | |
| | | // 自定义组件保存 |
| | | customSaveHandler() { |
| | | if (!this.customForm.text) { |
| | | this.$message.error('请选择使用字段'); |
| | | return; |
| | | } |
| | | if (!this.customForm.itemType) { |
| | | this.$message.error('请选择显示类型'); |
| | | return; |
| | | } |
| | | const status = this.formList.some(item => item.text === this.customForm.text); |
| | | if (status) { |
| | | this.$message.error('请检查是否添加相同项'); |
| | | return; |
| | | } |
| | | this.formList.push(this.customForm); |
| | | this.customVisible = false; |
| | | }, |
| | | |
| | | // 自定义对话框关闭 |
| | | closeCustomDialog() { |
| | | this.customForm = { |
| | | itemKeyValueList: [], |
| | | itemType: 'text', |
| | | itemCols: '1' |
| | | }; |
| | | }, |
| | | |
| | | // 清空不同类型表单下方绑定值 |
| | | clearFormBottom() { |
| | | this.optionObj = {}; |
| | | this.form.itemKeyValueList = []; |
| | | this.form.itemListTable = this.form.itemListTxt = this.form.itemListVal = this.form.itemStyle = ""; |
| | | }, |
| | | |
| | | // 自定义组件清空不同类型表单下方绑定值 |
| | | customClearFormBottom() { |
| | | this.customOptionObj = {}; |
| | | this.customForm.itemKeyValueList = []; |
| | | this.customForm.itemListTable = this.customForm.itemListTxt = this.customForm.itemListVal = this.customForm.itemStyle = ""; |
| | | }, |
| | | |
| | | // 自定义表单使用字段表格行点击 |
| | | customAttrRowClickHandler(row) { |
| | | this.customAttrRow = row; |
| | | }, |
| | | |
| | | // 自定义表单使用字段选择 |
| | | customTextHandler() { |
| | | this.customAttrVisible = true; |
| | | this.customAttrLoading = true |
| | | gridAttribute().then(res => { |
| | | const data = res.data.data; |
| | | this.customAttrData = data; |
| | | this.customAttrLoading = false; |
| | | }).catch(err => { |
| | | this.$message.error(err) |
| | | }); |
| | | }, |
| | | |
| | | // 自定义表单使用字段保存 |
| | | customAttrSaveHandler() { |
| | | if (func.isEmptyObject(this.customAttrRow)) { |
| | | this.$message.error('请选择一条数据进行保存'); |
| | | return; |
| | | } |
| | | // console.log(this.customAttrRow) |
| | | this.customForm.text = this.customAttrRow.id; |
| | | this.customAttrVisible = false; |
| | | }, |
| | | |
| | | // 右侧表单应用按钮 |
| | | asideFormHandler() { |
| | | if (!this.form.text) { |
| | | this.$message.error('请添加一条数据进行保存!'); |
| | | return; |
| | | } |
| | | this.formList = this.formList.map(item => |
| | | item.text === this.form.text ? this.form : item |
| | | ); |
| | | |
| | | this.$message.success('应用成功'); |
| | | }, |
| | | |
| | | // 预览按钮 |
| | | checkViewHandler() { |
| | | this.checkViewVisible = true; |
| | | }, |
| | | |
| | | // 查询模板下拉接口查询 |
| | | getSearchSelectList() { |
| | | getObjTypeQTs({btName: this.treeRadio === '0' ? this.TreeNodeRow.id : this.TreeNodeRow.name}).then(res => { |
| | | this.searchQtNameList = res.data.data; |
| | | }) |
| | | }, |
| | | |
| | | // 权限选择按钮 |
| | | authClickHandler() { |
| | | this.authVisible = true; |
| | | }, |
| | | |
| | | // 自定义表单选择权限 |
| | | customAuthClickHandler() { |
| | | this.authVisible = true; |
| | | this.authType = 'attr'; |
| | | }, |
| | | |
| | | // 权限树对话框关闭 |
| | | authDialogClose() { |
| | | this.authVisible = false; |
| | | this.refresh = Math.random(); // 刷新左侧树 |
| | | }, |
| | | |
| | | // 权限控制保存 |
| | | authDialogSaveHandler() { |
| | | const filterList = ['root', 'user', 'role', 'department'] |
| | | const data = this.$refs.authTree.getCheckedNodes().filter(item => !filterList.includes(item.oid)); |
| | | if (!data || data.length <= 0) { |
| | | this.$message.error('请检查是否勾选子节点'); |
| | | return; |
| | | } |
| | | |
| | | const resultMap = {}; |
| | | |
| | | data.forEach(item => { |
| | | const key = item.parentBtmName; |
| | | if (!resultMap[key]) { |
| | | resultMap[key] = []; // 初始化数组 |
| | | } |
| | | resultMap[key].push(item.parentBtmName === 'user' ? item.data.userName : item.data.name); |
| | | }); |
| | | |
| | | // 组装字符串 |
| | | const resultString = Object.entries(resultMap).map(([key, oids]) => { |
| | | return `${key}=${oids.join(',')}`; // 用 , 连接同一类型的 oid |
| | | }).join('&&'); // 最后用 && 连接不同类型 |
| | | |
| | | // console.log(resultString); |
| | | if (this.authType === 'attr') { |
| | | this.customForm.itemRight = resultString; |
| | | } else { |
| | | this.form.itemRight = resultString; |
| | | } |
| | | // this.form.itemRight = resultString; |
| | | this.authDialogClose(); |
| | | } |
| | | |
| | | } |
| | | } |
| | | </script> |