From ec2c06dabe9edaee7d28988d69a7bfd56eca3abd Mon Sep 17 00:00:00 2001 From: ludc Date: 星期五, 20 九月 2024 15:39:52 +0800 Subject: [PATCH] Merge remote-tracking branch 'origin/master' --- Source/plt-web/plt-web-ui/src/views/modelingMenu/ui/formDefine/components/formDialog.vue | 924 ++++++++++++++++++++++++++++++++++++++++++--------------- 1 files changed, 674 insertions(+), 250 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 36620ac..de71674 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 @@ -11,12 +11,12 @@ > <el-container> <div style="height: 79vh;display: flex;width: 100%;"> - - <el-aside width="15%"> + <el-aside width="17%"> <basic-container> <div style="height:650px;"> <avue-tree :data="treeData" + :loading="treeLoading" :option="treeOption" @node-drag-start="handleDragStart"> </avue-tree> @@ -26,48 +26,52 @@ <el-main> <basic-container> - <div style="height: 645px" @drop="drop" @dragover.prevent> + <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 v-for="(item,index) in formList" :key="index" :span="columnNumber"> - <el-tooltip :content="item.name" placement="top"> - <el-form-item :label="item.name + '锛�'" class="hiddenLabel"> - <el-input v-model="item.value" :splaceholder="item.name" size="mini"></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-model="item.value" :placeholder="item.text" size="mini"></el-input> + </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> @@ -82,24 +86,26 @@ <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" 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"> + <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> @@ -107,38 +113,38 @@ <el-col :span="24"> <el-tooltip content="榛樿鍊艰〃杈惧紡" placement="top"> <el-form-item class="hiddenLabel" label="榛樿鍊艰〃杈惧紡"> - <el-input v-model="user" placeholder="璇疯緭鍏ュ唴瀹�" size="mini"></el-input> + <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 class="hiddenLabel" label="鏃ユ湡鏍煎紡鍖栧瓧绗︿覆锛�"> - <el-input v-model="user" placeholder="璇疯緭鍏ュ唴瀹�" size="mini"></el-input> + <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" @@ -151,7 +157,7 @@ <el-tooltip content="鍙閫夋嫨鏉′欢" placement="top"> <el-form-item class="hiddenLabel" label="鍙閫夋嫨鏉′欢"> <el-input - v-model="textarea2" + v-model="form.itemEditableProgram" :rows="3" placeholder="璇疯緭鍏ュ唴瀹�" resize="none" @@ -163,20 +169,20 @@ <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> @@ -187,7 +193,7 @@ <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" @@ -199,7 +205,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" @@ -210,19 +216,19 @@ <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-input v-model="form.itemHttpVolumnPath" placeholder="璇疯緭鍏ュ唴瀹�" size="mini"></el-input> </el-form-item> </el-col> @@ -230,8 +236,8 @@ <el-tooltip content="瀛樺偍璺緞瀛楁" placement="top"> <el-form-item class="hiddenLabel" label="瀛樺偍璺緞瀛楁"> <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> + <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> @@ -239,17 +245,18 @@ </el-row> - <el-row style="margin-top: 10px;border-bottom: 1px solid #878585;padding-bottom: 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="user" placeholder="璇疯緭鍏ュ唴瀹�" size="mini"></el-input> + <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="user" placeholder="璇疯緭鍏ュ唴瀹�" size="mini"></el-input> + <el-input v-model="optionObj.optionValue" placeholder="璇疯緭鍏ュ唴瀹�" size="mini"></el-input> </el-form-item> </el-col> @@ -257,18 +264,19 @@ <el-form-item> <div style="height: 150px; width: 100%; border: 1px solid #bdbbbb;overflow-y: auto"> <el-table - :data="optionRightData" + :data="form.itemValueList" :highlight-current-row="true" :show-header="false" border stripe - style="width: 100%"> + style="width: 100%" + @row-click="optionTableClick"> <el-table-column align="center" label="鍚嶇О" - prop="name"> + prop="key"> <template slot-scope="scope"> - <el-tag size="medium">{{ scope.row.name }}</el-tag> + <el-tag size="medium">{{ scope.row.key }}</el-tag> </template> </el-table-column> <el-table-column @@ -282,36 +290,39 @@ </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">娣诲姞</el-button> - <el-button plain size="mini" style="margin-left: 5px" type="danger">鍒犻櫎</el-button> + <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="user" placeholder="璇疯緭鍏ュ唴瀹�" size="mini"></el-input> + <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="user" placeholder="璇疯緭鍏ュ唴瀹�" size="mini"></el-input> + <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="user" placeholder="璇疯緭鍏ュ唴瀹�" size="mini"></el-input> + <el-input v-model="form.itemListVal" placeholder="璇疯緭鍏ュ唴瀹�" size="mini"></el-input> </el-form-item> </el-col> </el-row> - - <el-row style="margin-top: 10px"> + <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" @@ -325,19 +336,392 @@ </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"> + <el-input v-model="customForm.text" placeholder="璇疯緭鍏ヤ娇鐢ㄥ瓧娈�" size="mini"></el-input> + <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 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.itemValueList" + :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 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">纭� 瀹�</el-button> + </span> + </el-dialog> </el-dialog> </template> <script> +import {getTreeAttributes} from "@/api/UI/formDefine/api"; +import func from "@/util/func"; export default { name: "formDialog", + props: { + TreeNodeRow: { + type: Object, + default: () => { + } + }, + treeRadio: { + type: String, + default: "" + } + }, data() { return { + optionObj: { + optionName: '', + optionValue: '' + }, + customOptionObj: { + optionName: '', + optionValue: '' + }, + customForm: { + itemValueList: [], + }, + 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: [ { @@ -346,208 +730,71 @@ } ], form: {}, + topForm: { + columnNumber: 8, + showColumn: '', + viName: '', + position: '' + }, rules: {}, - columnNumber: 3, loading: false, visible: false, treeOption: { + height: 'auto', menu: false, addBtn: false, draggable: true, + defaultExpandedKeys: ['root'], allowDrop: () => { return false; }, allowDrag: () => { return true; }, - // props: { - // label: 'name', - // value: 'id', - // children: 'children', - // }, + 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); // 涓嶅睍绀� + } + }, + created() { + // this.getTreeList(); }, methods: { // 鍏抽棴瀵硅瘽妗� closeDialog() { + this.formList = []; + + }, + + 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; + } + }) }, // 寮�濮嬫嫋鎷芥爲鑺傜偣浜嬩欢 @@ -560,13 +807,184 @@ drop(event) { // 浣跨敤 getData 鏂规硶鑾峰彇鏁版嵁 const data = JSON.parse(event.dataTransfer.getData('item')); - console.log('data', data); const params = { - name: data.label, - value: '', - type: '' + text: data.text, + oid: data.oid, } - this.formList.push(params) + 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}; + }, + + // 璁剧疆鏄剧ず琛屾暟 + 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, itemValueList; + + if (val === 'dialog') { + optionObj = this.customOptionObj; + itemValueList = this.customForm.itemValueList; + } else { + if (func.isEmptyObject(this.activeItem)) { + this.$message.error('璇烽�夋嫨涓�鏉℃暟鎹繘琛屾坊鍔犻�夐」'); + return; + } + optionObj = this.optionObj; + itemValueList = this.form.itemValueList; + } + + if (!optionObj.optionName) { + this.$message.error('璇疯緭鍏ラ�夐」鍚嶇О'); + return; + } + + if (!optionObj.optionValue) { + this.$message.error('璇疯緭鍏ラ�夐」鍊�'); + return; + } + + const params = { + key: optionObj.optionName, + value: optionObj.optionValue + }; + + itemValueList.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.visible = false; + this.$message.success('淇濆瓨鎴愬姛'); } } } @@ -582,6 +1000,12 @@ } } + .active-border { + .el-form-item__label { + color: #f56c6c; /* 璁剧疆杈规鐨勬牱寮� */ + } + } + .el-col { margin-bottom: 0px; height: 40px; -- Gitblit v1.9.3