From 0e818b766656ea54f516c1bb3b5987c985de80a9 Mon Sep 17 00:00:00 2001 From: ludc Date: 星期五, 18 十月 2024 16:56:12 +0800 Subject: [PATCH] Merge remote-tracking branch 'origin/master' --- Source/plt-web/plt-web-ui/src/views/modelingMenu/ui/formDefine/components/formDialog.vue | 1201 +++++++++++++++++++++++++++++++++++++++++++++----------- 1 files changed, 955 insertions(+), 246 deletions(-) diff --git a/Source/plt-web/plt-web-ui/src/views/modelingMenu/ui/formDefine/components/formDialog.vue b/Source/plt-web/plt-web-ui/src/views/modelingMenu/ui/formDefine/components/formDialog.vue index 87c22e0..017da53 100644 --- a/Source/plt-web/plt-web-ui/src/views/modelingMenu/ui/formDefine/components/formDialog.vue +++ b/Source/plt-web/plt-web-ui/src/views/modelingMenu/ui/formDefine/components/formDialog.vue @@ -5,67 +5,130 @@ :visible.sync="visible" append-to-body="true" class="avue-dialog" - title="" + title="琛ㄥ崟" width="100%" @close="closeDialog" > <el-container> - <div style="height: 80vh;display: flex;width: 100%;"> - - <el-aside width="15%"> + <div style="height: 79vh;display: flex;width: 100%;"> + <el-aside width="17%"> <basic-container> <div style="height:650px;"> <avue-tree :data="treeData" - :option="treeOption"></avue-tree> + :loading="treeLoading" + :option="treeOption" + @node-drag-start="handleDragStart"> + </avue-tree> </div> </basic-container> </el-aside> <el-main> <basic-container> - <div style="height: 650px"> + <div style="height: 645px;overflow-y: auto;padding-right: 5px" @drop="drop" @dragover.prevent> <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="name" 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="name" placeholder="璇疯緭鍏ュ唴瀹�" size="mini"></el-input> + <el-input v-model="form.itemQtName" placeholder="璇疯緭鍏ユ煡璇㈡ā鏉垮悕绉�" size="mini"></el-input> </span> <span style="display: flex;align-items: center; margin-right: 5px;"> <p class="tableTopLabel">鏄剧ず鍒楁暟锛�</p> - <el-input v-model="name" placeholder="璇疯緭鍏ュ唴瀹�" size="mini"></el-input> - <el-button plain size="mini" style="margin-left: 3px" type="success">璁剧疆</el-button> + <el-input v-model="topForm.showColumn" placeholder="璇疯緭鍏ュ唴瀹�" size="mini"></el-input> + <el-button plain size="mini" style="margin-left: 3px" type="success" + @click="setColumnHandler">璁剧疆</el-button> </span> <span style="display: flex;align-items: center; margin-right: 5px;"> <p class="tableTopLabel">浣嶇疆锛�</p> - <el-input v-model="name" placeholder="璇疯緭鍏ュ唴瀹�" size="mini"></el-input> - <el-button plain size="mini" style="margin-left: 3px" type="success">璋冩暣浣嶇疆</el-button> + <el-input v-model="topForm.position" placeholder="璇疯緭鍏ュ唴瀹�" size="mini"></el-input> + <el-button plain size="mini" style="margin-left: 3px" type="success" @click="positionClickHandler">璋冩暣浣嶇疆</el-button> </span> </div> <h3>椤甸潰瀹氫箟</h3> <el-form ref="form" :model="form" :rules="rules" label-width="100px"> <el-row> - <el-col :span="columnNumber"> - <el-tooltip content="categoryoid.lastmodifytime" placement="top"> - <el-form-item class="hiddenLabel" label="categoryoid.lastmodifytime"> - <el-input v-model="user" placeholder="瀹℃壒浜�"></el-input> - </el-form-item> - </el-tooltip> + <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.text + '锛�'" + 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> </div> <div style="display: flex;justify-content: center;margin-top: 15px"> - <el-button icon="el-icon-check" size="small" type="primary">淇濆瓨</el-button> - <el-button icon="el-icon-delete" plain size="small" type="danger">娓呯┖</el-button> - <el-button icon="el-icon-el-icon-close" plain size="small" type="primary">鍒犻櫎缁勪欢</el-button> - <el-button icon="el-icon-plus" plain size="small" type="primary">娣诲姞鑷畾涔夌粍浠�</el-button> + <el-button icon="el-icon-check" size="small" type="primary" @click="saveClickHandler">淇濆瓨</el-button> + <el-button icon="el-icon-delete" plain size="small" type="danger" @click="emptyClickHandler">娓呯┖ + </el-button> + <el-button icon="el-icon-close" plain size="small" type="primary" @click="delModuleClickHandler">鍒犻櫎缁勪欢 + </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> </div> </basic-container> @@ -73,70 +136,72 @@ <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="user" placeholder="璇疯緭鍏ュ唴瀹�" size="mini"></el-input> - <el-checkbox v-model="checked" style="margin-left: 5px; margin-right: 5px">鍙</el-checkbox> - <el-checkbox v-model="checked" style="margin-left: 5px;margin-right: 0px">蹇呭~</el-checkbox> + <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-checkbox> </div> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="鏄剧ず鍚嶇О"> - <el-input v-model="user" placeholder="璇疯緭鍏ュ唴瀹�" size="mini"></el-input> + <el-input v-model="form.itemName" placeholder="璇疯緭鍏ュ唴瀹�" size="mini"></el-input> </el-form-item> </el-col> <el-col :span="12"> <el-form-item class="rightLabel" label="鏄剧ず绫诲瀷"> - <el-select v-model="form.region" placeholder="璇烽�夋嫨娲诲姩鍖哄煙" size="mini"> - <el-option label="鍖哄煙涓�" value="shanghai"></el-option> - <el-option label="鍖哄煙浜�" value="beijing"></el-option> + <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> </el-col> <el-col :span="24"> <el-tooltip content="榛樿鍊艰〃杈惧紡" placement="top"> - <el-form-item label="榛樿鍊艰〃杈惧紡" class="hiddenLabel"> - <el-input v-model="user" placeholder="璇疯緭鍏ュ唴瀹�" size="mini"></el-input> + <el-form-item class="hiddenLabel" label="榛樿鍊艰〃杈惧紡"> + <el-input v-model="form.itemValue" placeholder="璇疯緭鍏ュ唴瀹�" size="mini"></el-input> </el-form-item> </el-tooltip> </el-col> <el-col :span="24"> - <!-- <el-tooltip content="鏄剧ず琛ㄨ揪寮�" placement="top">--> + <!-- <el-tooltip content="鏄剧ず琛ㄨ揪寮�" placement="top">--> <el-form-item label="鏄剧ず琛ㄨ揪寮�"> - <el-input v-model="user" placeholder="璇疯緭鍏ュ唴瀹�" size="mini"></el-input> + <el-input v-model="form.itemShowExpression" placeholder="璇疯緭鍏ュ唴瀹�" size="mini"></el-input> </el-form-item> - <!-- </el-tooltip>--> + <!-- </el-tooltip>--> </el-col> <el-col :span="24"> <el-tooltip content="鏃ユ湡鏍煎紡鍖栧瓧绗︿覆" placement="top"> - <el-form-item label="鏃ユ湡鏍煎紡鍖栧瓧绗︿覆锛�" class="hiddenLabel"> - <el-input v-model="user" placeholder="璇疯緭鍏ュ唴瀹�" size="mini"></el-input> + <el-form-item class="hiddenLabel" label="鏃ユ湡鏍煎紡鍖栧瓧绗︿覆锛�"> + <el-input v-model="form.itemDateFormat" placeholder="璇疯緭鍏ュ唴瀹�" size="mini"></el-input> </el-form-item> </el-tooltip> </el-col> <el-col :span="24"> <el-form-item label="鍗犱綅鏂瑰紡"> - <el-radio v-model="treeRadio" label="0">鏄剧ず</el-radio> - <el-radio v-model="treeRadio" label="1">涓嶆樉绀�</el-radio> + <el-radio v-model="form.itemCols" label="1">鏄剧ず</el-radio> + <el-radio v-model="form.itemCols" label="2">涓嶆樉绀�</el-radio> </el-form-item> </el-col> <el-col :span="24" style="height: 90px"> <el-form-item label="瀛楁琛ㄨ揪寮�"> <el-input - v-model="textarea2" + v-model="form.itemAddFilter" :rows="3" placeholder="璇疯緭鍏ュ唴瀹�" resize="none" @@ -147,9 +212,9 @@ <el-col :span="24" style="height: 90px"> <el-tooltip content="鍙閫夋嫨鏉′欢" placement="top"> - <el-form-item label="鍙閫夋嫨鏉′欢" class="hiddenLabel"> + <el-form-item class="hiddenLabel" label="鍙閫夋嫨鏉′欢"> <el-input - v-model="textarea2" + v-model="form.itemEditableProgram" :rows="3" placeholder="璇疯緭鍏ュ唴瀹�" resize="none" @@ -161,31 +226,31 @@ <el-col :span="12"> <el-form-item label="鎺у埗鍒�"> - <el-input v-model="user" placeholder="璇疯緭鍏ュ唴瀹�" size="mini"></el-input> + <el-input v-model="form.itemCtrlDisplyCol" placeholder="璇疯緭鍏ュ唴瀹�" size="mini"></el-input> </el-form-item> </el-col> <el-col :span="12"> <el-form-item class="rightLabel" label="鏄剧ず鍒楁潯浠�" label-width="95px"> - <el-input v-model="user" placeholder="璇疯緭鍏ュ唴瀹�" size="mini"></el-input> + <el-input v-model="form.itemCtrlDisplyCondition" placeholder="璇疯緭鍏ュ唴瀹�" size="mini"></el-input> </el-form-item> </el-col> <el-col :span="24"> <el-form-item label="鏉冮檺鎺у埗"> <div style="display: flex;align-items: center"> - <el-input v-model="user" placeholder="璇疯緭鍏ュ唴瀹�" size="mini"></el-input> + <el-input v-model="form.itemRight" placeholder="璇疯緭鍏ュ唴瀹�" size="mini"></el-input> <el-button plain size="mini" style="margin-left: 3px" type="success">閫夋嫨</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 style="margin-top: 10px;border-bottom: 1px solid #878585;padding-bottom: 10px"> <el-col :span="24" style="height: 90px"> <el-form-item label="鑴氭湰楠岃瘉"> <el-input - v-model="textarea2" + v-model="form.itemScript" :rows="3" placeholder="璇疯緭鍏ュ唴瀹�" resize="none" @@ -197,7 +262,7 @@ <el-col :span="24" style="height: 90px"> <el-form-item label="鎻愮ず鏂囧瓧"> <el-input - v-model="textarea2" + v-model="form.itemTips" :rows="3" placeholder="璇疯緭鍏ュ唴瀹�" resize="none" @@ -208,40 +273,113 @@ <el-col :span="24"> <el-form-item label="鏌ヨ鍏宠仈鍒�"> - <el-input v-model="user" placeholder="璇疯緭鍏ュ唴瀹�" size="mini"></el-input> + <el-input v-model="form.itemQueryRefFields" placeholder="璇疯緭鍏ュ唴瀹�" size="mini"></el-input> </el-form-item> </el-col> <el-col :span="24"> <el-form-item label="鑷畾涔夌被"> - <el-input v-model="user" placeholder="璇疯緭鍏ュ唴瀹�" size="mini"></el-input> + <el-input v-model="form.itemCustomClass" placeholder="璇疯緭鍏ュ唴瀹�" size="mini"></el-input> </el-form-item> </el-col> <el-col :span="24"> - <el-form-item label="瀛樺偍璺緞" > - <el-input v-model="user" placeholder="璇疯緭鍏ュ唴瀹�" size="mini"></el-input> + <el-form-item label="瀛樺偍璺緞"> + <el-input v-model="form.itemHttpVolumnPath" placeholder="璇疯緭鍏ュ唴瀹�" size="mini"></el-input> </el-form-item> </el-col> <el-col :span="24"> <el-tooltip content="瀛樺偍璺緞瀛楁" placement="top"> - <el-form-item label="瀛樺偍璺緞瀛楁" class="hiddenLabel"> - <div style="display: flex"> - <el-input v-model="user" placeholder="璇疯緭鍏ュ唴瀹�" size="mini"></el-input> - <el-checkbox v-model="checked" style="margin-left: 5px">http瀛樺偍</el-checkbox> - </div> - </el-form-item> + <el-form-item class="hiddenLabel" label="瀛樺偍璺緞瀛楁"> + <div style="display: flex"> + <el-input v-model="form.itemHttpPathField" placeholder="璇疯緭鍏ュ唴瀹�" size="mini"></el-input> + <el-checkbox v-model="form.itemIsHttpSave" style="margin-left: 5px">http瀛樺偍</el-checkbox> + </div> + </el-form-item> </el-tooltip> </el-col> </el-row> - <el-row style="margin-top: 10px"> + <el-row v-if="form.itemType ? optionTypeStatus : true" + style="margin-top: 10px;border-bottom: 1px solid #878585;padding-bottom: 10px"> + <h4>閫夐」鍒楄〃</h4> + <el-col :span="12"> + <el-form-item label="鍚嶇О"> + <el-input v-model="optionObj.optionName" placeholder="璇疯緭鍏ュ悕绉�" size="mini"></el-input> + </el-form-item> + </el-col> + + <el-col :span="12"> + <el-form-item class="rightLabel" label="鍊�" label-width="95px"> + <el-input v-model="optionObj.optionValue" placeholder="璇疯緭鍏ュ唴瀹�" size="mini"></el-input> + </el-form-item> + </el-col> + + <el-col :span="24" style="height: 190px"> + <el-form-item> + <div style="height: 150px; width: 100%; border: 1px solid #bdbbbb;overflow-y: auto"> + <el-table + :data="form.itemKeyValueList" + :highlight-current-row="true" + :show-header="false" + border + stripe + style="width: 100%" + @row-click="optionTableClick"> + <el-table-column + align="center" + label="鍚嶇О" + prop="key"> + <template slot-scope="scope"> + <el-tag size="medium">{{ scope.row.key }}</el-tag> + </template> + </el-table-column> + <el-table-column + align="center" + label="鍊�" + prop="value"> + <template slot-scope="scope"> + <el-tag size="medium">{{ scope.row.value }}</el-tag> + </template> + </el-table-column> + </el-table> + </div> + <div style="display: flex;align-items: center;justify-content: center;margin-top: 5px"> + <el-button plain size="mini" style="margin-right: 5px" type="success" + @click="optionAddClickHandler">娣诲姞 + </el-button> + <el-button plain size="mini" style="margin-left: 5px" type="danger" + @click="optionDeleteClickHandler">鍒犻櫎 + </el-button> + </div> + </el-form-item> + </el-col> + + <el-col :span="24"> + <el-form-item label="涓�绾у弬鐓�"> + <el-input v-model="form.itemListTable" placeholder="璇疯緭鍏ュ唴瀹�" size="mini"></el-input> + </el-form-item> + </el-col> + + <el-col :span="24"> + <el-form-item label="浜岀骇鍙傜収"> + <el-input v-model="form.itemListTxt" placeholder="璇疯緭鍏ュ唴瀹�" size="mini"></el-input> + </el-form-item> + </el-col> + + <el-col :span="24"> + <el-form-item label="鍙傜収鍊�"> + <el-input v-model="form.itemListVal" placeholder="璇疯緭鍏ュ唴瀹�" size="mini"></el-input> + </el-form-item> + </el-col> + </el-row> + <el-row v-if="form.itemType ? itemStyleTypeStatus : true" style="margin-top: 10px"> <el-col :span="24" style="height: 90px"> <el-form-item label="闄勫姞灞炴��"> <el-input - v-model="textarea2" + v-model="form.itemStyle" :rows="3" placeholder="璇疯緭鍏ュ唴瀹�" resize="none" @@ -250,218 +388,783 @@ </el-form-item> </el-col> </el-row> + </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> - </el-container> + + <!-- 娣诲姞鑷畾涔夌粍浠� --> + <el-dialog + v-dialogDrag + v-loading="customLoading" + :visible.sync="customVisible" + append-to-body="true" + class="avue-dialog" + title="琛ㄥ崟" + width="40%" + @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;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-checkbox> + </div> + </el-form-item> + </el-col> + + <el-col :span="12"> + <el-form-item label="鏄剧ず鍚嶇О"> + <el-input v-model="customForm.itemName" placeholder="璇疯緭鍏ュ唴瀹�" size="mini"></el-input> + </el-form-item> + </el-col> + + <el-col :span="12"> + <el-form-item class="rightLabel" label="鏄剧ず绫诲瀷"> + <el-select v-model="customForm.itemType" placeholder="璇烽�夋嫨绫诲瀷" size="mini"> + <el-option v-for="(item,index) in showSelectList" :key="index" :label="item.label" + :value="item.value"></el-option> + </el-select> + </el-form-item> + </el-col> + + <el-col :span="24"> + <el-tooltip content="榛樿鍊艰〃杈惧紡" placement="top"> + <el-form-item class="hiddenLabel" label="榛樿鍊艰〃杈惧紡"> + <el-input v-model="customForm.itemValue" placeholder="璇疯緭鍏ュ唴瀹�" size="mini"></el-input> + </el-form-item> + </el-tooltip> + </el-col> + + <el-col :span="24"> + <!-- <el-tooltip content="鏄剧ず琛ㄨ揪寮�" placement="top">--> + <el-form-item label="鏄剧ず琛ㄨ揪寮�"> + <el-input v-model="customForm.itemShowExpression" placeholder="璇疯緭鍏ュ唴瀹�" size="mini"></el-input> + </el-form-item> + <!-- </el-tooltip>--> + </el-col> + + <el-col :span="24"> + <el-tooltip content="鏃ユ湡鏍煎紡鍖栧瓧绗︿覆" placement="top"> + <el-form-item class="hiddenLabel" label="鏃ユ湡鏍煎紡鍖栧瓧绗︿覆锛�"> + <el-input v-model="customForm.itemDateFormat" placeholder="璇疯緭鍏ュ唴瀹�" size="mini"></el-input> + </el-form-item> + </el-tooltip> + </el-col> + + <el-col :span="24"> + <el-form-item label="鍗犱綅鏂瑰紡"> + <el-radio v-model="customForm.itemCols" label="1">鏄剧ず</el-radio> + <el-radio v-model="customForm.itemCols" label="2">涓嶆樉绀�</el-radio> + </el-form-item> + </el-col> + + <el-col :span="24" style="height: 90px"> + <el-form-item label="瀛楁琛ㄨ揪寮�"> + <el-input + v-model="customForm.itemAddFilter" + :rows="3" + placeholder="璇疯緭鍏ュ唴瀹�" + resize="none" + type="textarea"> + </el-input> + </el-form-item> + </el-col> + + <el-col :span="24" style="height: 90px"> + <el-tooltip content="鍙閫夋嫨鏉′欢" placement="top"> + <el-form-item class="hiddenLabel" label="鍙閫夋嫨鏉′欢"> + <el-input + v-model="customForm.itemEditableProgram" + :rows="3" + placeholder="璇疯緭鍏ュ唴瀹�" + resize="none" + type="textarea"> + </el-input> + </el-form-item> + </el-tooltip> + </el-col> + + <el-col :span="12"> + <el-form-item label="鎺у埗鍒�"> + <el-input v-model="customForm.itemCtrlDisplyCol" placeholder="璇疯緭鍏ュ唴瀹�" size="mini"></el-input> + </el-form-item> + </el-col> + + <el-col :span="12"> + <el-form-item class="rightLabel" label="鏄剧ず鍒楁潯浠�" label-width="95px"> + <el-input v-model="customForm.itemCtrlDisplyCondition" placeholder="璇疯緭鍏ュ唴瀹�" size="mini"></el-input> + </el-form-item> + </el-col> + + <el-col :span="24"> + <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> + </div> + </el-form-item> + </el-col> + + </el-row> + <el-row style="margin-top: 10px;border-bottom: 1px solid #878585;padding-bottom: 10px"> + <el-col :span="24" style="height: 90px"> + <el-form-item label="鑴氭湰楠岃瘉"> + <el-input + v-model="customForm.itemScript" + :rows="3" + placeholder="璇疯緭鍏ュ唴瀹�" + resize="none" + type="textarea"> + </el-input> + </el-form-item> + </el-col> + + <el-col :span="24" style="height: 90px"> + <el-form-item label="鎻愮ず鏂囧瓧"> + <el-input + v-model="customForm.itemTips" + :rows="3" + placeholder="璇疯緭鍏ュ唴瀹�" + resize="none" + type="textarea"> + </el-input> + </el-form-item> + </el-col> + + <el-col :span="24"> + <el-form-item label="鏌ヨ鍏宠仈鍒�"> + <el-input v-model="customForm.itemQueryRefFields" placeholder="璇疯緭鍏ュ唴瀹�" size="mini"></el-input> + </el-form-item> + </el-col> + + <el-col :span="24"> + <el-form-item label="鑷畾涔夌被"> + <el-input v-model="customForm.itemCustomClass" placeholder="璇疯緭鍏ュ唴瀹�" size="mini"></el-input> + </el-form-item> + </el-col> + + <el-col :span="24"> + <el-form-item label="瀛樺偍璺緞"> + <el-input v-model="customForm.itemHttpVolumnPath" placeholder="璇疯緭鍏ュ唴瀹�" size="mini"></el-input> + </el-form-item> + </el-col> + + <el-col :span="24"> + <el-tooltip content="瀛樺偍璺緞瀛楁" placement="top"> + <el-form-item class="hiddenLabel" label="瀛樺偍璺緞瀛楁"> + <div style="display: flex"> + <el-input v-model="customForm.itemHttpPathField" placeholder="璇疯緭鍏ュ唴瀹�" size="mini"></el-input> + <el-checkbox v-model="customForm.itemIsHttpSave" style="margin-left: 5px">http瀛樺偍</el-checkbox> + </div> + </el-form-item> + </el-tooltip> + </el-col> + + </el-row> + + <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-input v-model="customOptionObj.optionName" placeholder="璇疯緭鍏ュ悕绉�" size="mini"></el-input> + </el-form-item> + </el-col> + + <el-col :span="12"> + <el-form-item class="rightLabel" label="鍊�" label-width="95px"> + <el-input v-model="customOptionObj.optionValue" placeholder="璇疯緭鍏ュ唴瀹�" size="mini"></el-input> + </el-form-item> + </el-col> + + <el-col :span="24" style="height: 190px"> + <el-form-item> + <div style="height: 150px; width: 100%; border: 1px solid #bdbbbb;overflow-y: auto"> + <el-table + :data="customForm.itemKeyValueList" + :highlight-current-row="true" + :show-header="false" + border + stripe + style="width: 100%"> + <el-table-column + align="center" + label="鍚嶇О" + prop="key"> + <template slot-scope="scope"> + <el-tag size="medium">{{ scope.row.key }}</el-tag> + </template> + </el-table-column> + <el-table-column + align="center" + label="鍊�" + prop="value"> + <template slot-scope="scope"> + <el-tag size="medium">{{ scope.row.value }}</el-tag> + </template> + </el-table-column> + </el-table> + </div> + <div style="display: flex;align-items: center;justify-content: center;margin-top: 5px"> + <el-button plain size="mini" style="margin-right: 5px" type="success" + @click="optionAddClickHandler('dialog')">娣诲姞 + </el-button> + <el-button plain size="mini" style="margin-left: 5px" type="danger">鍒犻櫎</el-button> + </div> + </el-form-item> + </el-col> + + <el-col :span="24"> + <el-form-item label="涓�绾у弬鐓�"> + <el-input v-model="customForm.itemListTable" placeholder="璇疯緭鍏ュ唴瀹�" size="mini"></el-input> + </el-form-item> + </el-col> + + <el-col :span="24"> + <el-form-item label="浜岀骇鍙傜収"> + <el-input v-model="customForm.itemListTxt" placeholder="璇疯緭鍏ュ唴瀹�" size="mini"></el-input> + </el-form-item> + </el-col> + + <el-col :span="24"> + <el-form-item label="鍙傜収鍊�"> + <el-input v-model="customForm.itemListVal" placeholder="璇疯緭鍏ュ唴瀹�" size="mini"></el-input> + </el-form-item> + </el-col> + </el-row> + <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 + v-model="customForm.itemStyle" + :rows="3" + placeholder="璇疯緭鍏ュ唴瀹�" + resize="none" + type="textarea"> + </el-input> + </el-form-item> + </el-col> + </el-row> + + </el-form> + <span slot="footer" class="dialog-footer"> + <el-button @click="customVisible = false">鍙� 娑�</el-button> + <el-button type="primary" @click="customSaveHandler">纭� 瀹�</el-button> + </span> + </el-dialog> </el-dialog> </template> <script> +import {getTreeAttributes, savePortalVI} from "@/api/UI/formDefine/api"; +import func from "@/util/func"; + export default { name: "formDialog", + props: { + TreeNodeRow: { + type: Object, + default: () => { + } + }, + treeRadio: { + type: String, + default: "" + }, + editRow: { + type: Object, + default: () => { + } + } + }, data() { return { + optionObj: { + optionName: '', + optionValue: '' + }, + customOptionObj: { + optionName: '', + optionValue: '' + }, + customForm: { + itemKeyValueList: [], + itemCols: '1' + }, + customLoading: false, + customVisible: false, + treeLoading: false, + showSelectList: [ + { + label: '鍗曡鏂囨湰妗�', + value: 'text' + }, + { + label: '鏂囨湰鎸夐挳妗�', + value: 'textbtn' + }, + { + label: '澶氳鏂囨湰妗�', + value: 'textarea' + }, + { + label: '瀵屾枃鏈', + value: 'richtext' + }, + { + label: '鏁板瓧杈撳叆妗�', + value: 'number' + }, + { + label: '瀵嗙爜妗�', + value: 'password' + }, + { + label: '鍗曢�夋寜閽�', + value: 'radio' + }, + { + label: '澶氶�夋寜閽�', + value: 'checkbox' + }, + { + label: '涓嬫媺鑿滃崟', + value: 'select' + }, + { + label: '澶氶�変笅鎷夎彍鍗�', + value: 'multiselect' + }, + { + label: '鏃ユ湡杈撳叆妗�', + value: 'date' + }, + { + label: '鏃堕棿杈撳叆妗�', + value: 'time' + }, + { + label: '鏃ユ湡鏃堕棿杈撳叆妗�', + value: 'datetime' + }, + { + label: '鏂囦欢涓婁紶', + value: 'file' + }, + { + label: '澶氭枃浠朵笂浼�', + value: 'multiFile' + }, + { + label: '鑷畾涔�', + value: 'custom' + }, + { + label: '鑷畾涔夎〃鍗�', + value: 'customform' + }, + { + label: '闅愯棌鎴栨櫘閫氭枃瀛�', + value: 'hidden' + }, + { + label: 'Web缂栬緫鍣�', + value: 'webeditor' + }, + { + label: '鐗规畩瀛楃', + value: 'specialCharacter' + }, + ], + activeItem: {}, // 鐢ㄤ簬瀛樺偍褰撳墠鐐瑰嚮鐨� item 鐨勮妭鐐逛俊鎭� + activeItemIndex: null, // 鐢ㄤ簬瀛樺偍褰撳墠鐐瑰嚮鑺傜偣鐨� index 涓嬫爣 + formList: [], + optionRightData: [ + { + name: 'test', + value: 'test' + } + ], form: {}, + topForm: { + columnNumber: 8, + showColumn: '3', + viName: '', + position: '' + }, rules: {}, - columnNumber: 12, loading: false, visible: false, treeOption: { + height: 'auto', menu: false, addBtn: false, - // props: { - // label: 'name', - // value: 'id', - // children: 'children', - // }, + draggable: true, + defaultExpandedKeys: ['root'], + allowDrop: () => { + return false; + }, + allowDrag: () => { + return true; + }, + props: { + label: 'text', + value: 'oid', + children: 'children', + }, }, - treeData: [ - { - value: 0, - label: '涓�绾ч儴闂�', - children: [ - { - value: 1, - label: '涓�绾ч儴闂�1', - }, { - value: 2, - label: '涓�绾ч儴闂�2', - } - ] - }, { - value: 3, - label: '浜岀骇閮ㄩ棬', - children: [ - { - value: 4, - label: '浜岀骇閮ㄩ棬1', - }, { - value: 5, - label: '浜岀骇閮ㄩ棬2', - } - ] - }, - { - value: 0, - label: '涓�绾ч儴闂�', - children: [ - { - value: 1, - label: '涓�绾ч儴闂�1', - }, { - value: 2, - label: '涓�绾ч儴闂�2', - } - ] - }, { - value: 3, - label: '浜岀骇閮ㄩ棬', - children: [ - { - value: 4, - label: '浜岀骇閮ㄩ棬1', - }, { - value: 5, - label: '浜岀骇閮ㄩ棬2', - } - ] - }, - { - value: 0, - label: '涓�绾ч儴闂�', - children: [ - { - value: 1, - label: '涓�绾ч儴闂�1', - }, { - value: 2, - label: '涓�绾ч儴闂�2', - } - ] - }, { - value: 3, - label: '浜岀骇閮ㄩ棬', - children: [ - { - value: 4, - label: '浜岀骇閮ㄩ棬1', - }, { - value: 5, - label: '浜岀骇閮ㄩ棬2', - } - ] - }, - { - value: 0, - label: '涓�绾ч儴闂�', - children: [ - { - value: 1, - label: '涓�绾ч儴闂�1', - }, { - value: 2, - label: '涓�绾ч儴闂�2', - } - ] - }, { - value: 3, - label: '浜岀骇閮ㄩ棬', - children: [ - { - value: 4, - label: '浜岀骇閮ㄩ棬1', - }, { - value: 5, - label: '浜岀骇閮ㄩ棬2', - } - ] - }, - { - value: 0, - label: '涓�绾ч儴闂�', - children: [ - { - value: 1, - label: '涓�绾ч儴闂�1', - }, { - value: 2, - label: '涓�绾ч儴闂�2', - } - ] - }, { - value: 3, - label: '浜岀骇閮ㄩ棬', - children: [ - { - value: 4, - label: '浜岀骇閮ㄩ棬1', - }, { - value: 5, - label: '浜岀骇閮ㄩ棬2', - } - ] - }, - { - value: 0, - label: '涓�绾ч儴闂�', - children: [ - { - value: 1, - label: '涓�绾ч儴闂�1', - }, { - value: 2, - label: '涓�绾ч儴闂�2', - } - ] - }, { - value: 3, - label: '浜岀骇閮ㄩ棬', - children: [ - { - value: 4, - label: '浜岀骇閮ㄩ棬1', - }, { - value: 5, - label: '浜岀骇閮ㄩ棬2', - } - ] - }, - { - value: 0, - label: '涓�绾ч儴闂�', - children: [ - { - value: 1, - label: '涓�绾ч儴闂�1', - }, { - value: 2, - label: '涓�绾ч儴闂�2', - } - ] - }, { - value: 3, - label: '浜岀骇閮ㄩ棬', - children: [ - { - value: 4, - label: '浜岀骇閮ㄩ棬1', - }, { - value: 5, - label: '浜岀骇閮ㄩ棬2', - } - ] - } - ] + treeData: [] } + }, + computed: { + optionTypeStatus() { + const types = ['radio', 'checkbox', 'select']; + return types.includes(this.form.itemType); // 灞曠ず + }, + + 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(); }, methods: { // 鍏抽棴瀵硅瘽妗� closeDialog() { + this.formList = []; + this.form = {}; + this.activeItem = {}; + this.topForm.viName = ""; + }, + + getTreeList() { + this.treeLoading = true; + const params = { + 'conditionMap[typeName]': this.treeRadio === '0' ? this.TreeNodeRow.id : this.TreeNodeRow.name, + 'conditionMap[isDefault]': true, + 'conditionMap[typeFlag]': this.treeRadio === '0' ? 'BtmType' : this.treeRadio === '1' ? 'LinkType' : '', + } + getTreeAttributes(params).then(res => { + if (res.data.code === 200) { + const data = res.data.data; + this.treeData = data; + this.treeLoading = false; + } + }) + }, + + // 寮�濮嬫嫋鎷芥爲鑺傜偣浜嬩欢 + handleDragStart(node, ev) { + // 浣跨敤 setData 鏂规硶璁剧疆鏁版嵁 + ev.dataTransfer.setData('item', JSON.stringify(node.data)); + }, + + // 鎷栨嫿鍒拌〃鍗曟椂 + drop(event) { + // 浣跨敤 getData 鏂规硶鑾峰彇鏁版嵁 + const data = JSON.parse(event.dataTransfer.getData('item')); + const params = { + text: data.text, + oid: data.oid, + itemType: 'text' + } + const isDuplicate = this.formList.some(item => item.text === data.text); + + if (isDuplicate) { + this.$message.error('璇锋鏌ユ槸鍚︽坊鍔犵浉鍚岄」锛�') + } else { + this.formList.push(params); + } + }, + + // 椤甸潰瀹氫箟閫夐」鐐瑰嚮 + formItemClick(item, index) { + this.activeItem = item; + this.activeItemIndex = index; + this.form = {...item}; + // console.log(item,index); + this.topForm.position = index += 1; + }, + + // 璁剧疆鏄剧ず琛屾暟 + setColumnHandler() { + const number = /^[0-9]*\.?[0-9]+$/.test(this.topForm.showColumn); + + if (!number) { + this.$message.error('鍊煎繀椤绘槸鏁板瓧瀛楃'); + return; + } + this.topForm.columnNumber = this.getValueBasedOnInput(this.topForm.showColumn); + }, + + // 鏍规嵁浼犲叆姣忚鍒楁暟 鏉ュ垽鏂璭l-col :span鏄灏� + getValueBasedOnInput(val) { + const n = JSON.parse(val ? val : '3'); + switch (n) { + case 1: + return 24; + case 2: + return 12; + case 3: + return 8; + case 4: + return 6; + case 5: + return 4; + case 6: + return 4; + case 7: + case 8: + return 3; + case 9: + return 2; + default: + return n > 10 ? 1 : 8; // 榛樿缁�8 + } + }, + + // 娓呯┖椤甸潰瀹氫箟 + emptyClickHandler() { + this.$confirm('鎮ㄧ‘瀹氳娓呯┖鎵�鏈夋暟鎹悧锛�', '鎻愮ず', { + confirmButtonText: '纭畾', + cancelButtonText: '鍙栨秷', + type: 'warning' + }).then(() => { + this.formList = []; + this.activeItem = {}; + this.form = {}; + this.$message({ + type: 'success', + message: '鍒犻櫎鎴愬姛!' + }); + }).catch(() => { + this.$message({ + type: 'info', + message: '宸插彇娑堝垹闄�' + }); + }); + }, + + // 鍒犻櫎缁勪欢 + delModuleClickHandler() { + if (func.isEmptyObject(this.activeItem)) { + this.$message.error('璇烽�夋嫨涓�鏉℃暟鎹繘琛屽垹闄�'); + return; + } + this.formList = this.formList.filter(item => item.text != this.activeItem.text); + this.activeItem = {}; + this.form = {}; + }, + + // 璋冩暣浣嶇疆 + positionClickHandler() { + if (!this.topForm.position) { + this.$message.error('璇疯緭鍏ヨ皟鏁翠綅缃�'); + return; + } + + if (func.isEmptyObject(this.activeItem)) { + this.$message.error('璇烽�夋嫨涓�鏉℃暟鎹繘琛岃皟鏁翠綅缃�'); + return; + } + + const number = /^[0-9]*\.?[0-9]+$/.test(this.topForm.position); + + if (!number) { + this.$message.error('鍊煎繀椤绘槸鏁板瓧瀛楃'); + return; + } + + // 鍏堝皢瑕佹洿鎹綅缃殑椤归�氳繃 activeItemIndex 杩涜绉婚櫎 + this.formList.splice(this.activeItemIndex, 1); + // 灏嗗綋鍓嶇偣鍑诲璞� activeItem 鎻掑叆鍒版暟缁勪腑瀵瑰簲浣嶇疆 + this.formList.splice(JSON.parse(this.topForm.position) - 1, 0, this.activeItem); + this.activeItem = {}; + this.activeItemIndex = null; + }, + + // 閫夐」琛ㄦ牸琛岀偣鍑� + optionTableClick(row) { + console.log(row); + }, + + // 閫夐」娣诲姞 + optionAddClickHandler(val) { + let optionObj, itemKeyValueList; + + if (val === 'dialog') { + optionObj = this.customOptionObj; + itemKeyValueList = this.customForm.itemKeyValueList; + } else { + if (func.isEmptyObject(this.activeItem)) { + this.$message.error('璇烽�夋嫨涓�鏉℃暟鎹繘琛屾坊鍔犻�夐」'); + return; + } + optionObj = this.optionObj; + itemKeyValueList = this.form.itemKeyValueList; + } + + if (!optionObj.optionName) { + this.$message.error('璇疯緭鍏ラ�夐」鍚嶇О'); + return; + } + + if (!optionObj.optionValue) { + this.$message.error('璇疯緭鍏ラ�夐」鍊�'); + return; + } + + const params = { + key: optionObj.optionName, + value: optionObj.optionValue + }; + + itemKeyValueList.push(params); + }, + + // 閫夐」鍒犻櫎 + optionDeleteClickHandler() { + + }, + + // 娣诲姞鑷畾涔夌粍浠� + addCustomClickHandler() { + this.customVisible = true; + }, + + // 淇濆瓨鎸夐挳 + saveClickHandler() { + if (!this.topForm.viName) { + this.$message.error('鍚嶇О涓嶈兘涓虹┖'); + return; + } + if (this.formList.length <= 0) { + this.$message.error('椤甸潰涓嶈兘涓虹┖'); + return; + } + this.formList = this.formList.map(item => { + return { + ...item, + itemField: item.text // 灏唅temField璧嬪�间负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 + }, + } + console.log(params); + savePortalVI(params).then(res => { + console.log(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; + } + const targetObject = this.formList.find(item => item.text === this.form.text); + + if (targetObject) { + targetObject.itemType = val; + } + this.form.itemType = val; + }, + + // 鑷畾涔夌粍浠朵繚瀛� + customSaveHandler() { + if (!this.customForm.text) { + this.$message.error('璇烽�夋嫨浣跨敤瀛楁'); + return; + } + if (!this.customForm.itemType) { + 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 = ""; + }, + + // 鑷畾涔夎〃鍗曚娇鐢ㄥ瓧娈甸�夋嫨 + customTextHandler() { + + }, + + // 鍙充晶琛ㄥ崟搴旂敤鎸夐挳 + asideFormHandler() { + + }, + + customClearFormBottom() { + this.optionObj = {}; + this.form.itemKeyValueList = []; + this.form.itemListTable = ""; + this.form.itemListTxt = ""; + this.form.itemListVal = ""; + this.form.itemStyle = ""; } } } @@ -469,7 +1172,7 @@ <style lang="scss" scoped> ::v-deep { - .hiddenLabel{ + .hiddenLabel { .el-form-item__label { white-space: nowrap; // 闃叉鎹㈣ overflow: hidden; //闅愯棌瓒呭嚭閮ㄥ垎 @@ -477,6 +1180,12 @@ } } + .active-border { + .el-form-item__label { + color: #f56c6c; /* 璁剧疆杈规鐨勬牱寮� */ + } + } + .el-col { margin-bottom: 0px; height: 40px; -- Gitblit v1.9.3