表單布局排列比較常見，這里記錄下可以做為參考
主要用到的el-row柵格-el-card卡片el-form表單
需要注意的是el-form 需要添加屬性：
:label-position
否則在el-col內不會兩列或多列顯示,只會顯示在一行內
另外注意，label-width:來設置左側說明文的寬度，可以設置再el-form內進行統一設置，也可設置再el-form-item內進行單獨某項區分。
<el-form ref="workform" :rules="rules" :model="workform" label-width="100px"> <el-form-item label-width="100px" label="總代理信息"> <el-input v-model="workform.areaManager" disabled ></el-input> </el-form-item> ...
代碼參考：
<template> <div class="shouliTab"> <!-- <h3 style="color: #333; width: 100%; text-align: center; margin: 10px auto"> 填寫表單 </h3> --> <el-form ref="form" :label-position="labelPosition" label-width="120px" :model="form" :rules="rules" size="small" > <el-tabs style="" tabPosition="top" type="border-card"> <el-tab-pane> <span slot="label"><i class="el-icon-date"></i> 業務類型</span> <!-- 表格表單1 --> <el-card> <el-row> <el-col :span="12"> <el-form-item label="業務來源" prop="busiSoureId"> <el-select style="width: 100%" v-model="form.busiSoureId" placeholder="請選擇業務來源" > <el-option v-for="item in yewulaiyuanObj" :key="item.value" :label="item.value" :value="item.key" ></el-option> </el-select> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="業務類型" prop="busiTypeId"> <el-select style="width: 100%" v-model="form.busiTypeId" placeholder="請選擇業務類型" > <el-option v-for="item in yewuleixingObj" :key="item.value" :label="item.value" :value="item.key" ></el-option> </el-select> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item label="客戶名稱" prop="customName"> <el-input v-model="form.customName"></el-input> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="聯系方式" prop="phoneNumb"> <el-input v-model="form.phoneNumb" disabled></el-input> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item v-if="this.form.busiSoureId == '9'" label="客戶類別" > <el-select style="width: 100%" v-model="form.customLevel" prop="customLevel" placeholder="請選擇客戶類別" > <el-option v-for="item in kehuleibieObj" :key="item.value" :label="item.value" :value="item.key" ></el-option> </el-select> </el-form-item> </el-col> <el-col :span="12"> <el-form-item v-if="this.form.busiSoureId == '9'" label="是否購買" > <el-select style="width: 100%" v-model="form.isBuy" prop="isBuy" placeholder="是否購買" > <el-option v-for="item in shifoumaiObj" :key="item.value" :label="item.value" :value="item.key" ></el-option> </el-select> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item label="受理來源"> <el-select style="width: 100%" v-model="form.sourceType" disabled placeholder="受理來源" > <el-option v-for="item in sourceTypeList" :key="item.value" :label="item.value" :value="item.key" disabled ></el-option> </el-select> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="回訪時間:" prop="returnTime"> <el-date-picker style="width: 100%" v-model="form.returnTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="選擇日期" > </el-date-picker> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item v-if="this.form.busiTypeId == '1'" label="銷售人員" prop="salesMan" > <el-input v-model="form.salesMan"></el-input> </el-form-item> </el-col> <el-col :span="12"> </el-col> </el-row> </el-card> <el-card style="margin-top: 10px"> <!-- 表格表單2 --> <el-row> <el-col :span="12"> <el-form-item label="子公司/片區:" prop="areaInfo"> <el-cascader style="width: 100%" v-model="form.areaInfo" :options="areaInfoObj" @change="subChangeOpt" filterable clearable ></el-cascader> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="總代理地址:" prop="areaAddress"> <el-input v-model="form.areaAddress" prop="areaAddress" placeholder="總代理地址" > </el-input> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item label="總代理姓名:" prop="areaManagerName"> <el-input v-model="form.areaManagerName" prop="areaManagerName" placeholder="總代理姓名" > </el-input> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="總代理手機號:" prop="areaManPhone"> <el-input v-model="form.areaManPhone" prop="areaManPhone" placeholder="總代理手機號" > </el-input> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <template v-if="this.form.busiTypeId == '2'"> <el-form-item label="投訴類型" prop="complainType"> <el-cascader v-model="form.complainType" :options="options" clearable @change="fnChangeOpt" ></el-cascader> </el-form-item> </template> </el-col> <el-col :span="12"> </el-col> </el-row> </el-card> <el-card style="margin-top: 10px"> <!-- 表格表單3 --> <el-form-item label="咨詢內容" prop="consultContent"> <el-input type="textarea" :autosize="{ minRows: 5, maxRows: 8 }" v-model="form.consultContent" ></el-input> </el-form-item> <el-form-item label="處理意見" prop="dealOpinions"> <el-input type="textarea" :autosize="{ minRows: 5, maxRows: 8 }" v-model="form.dealOpinions" ></el-input> </el-form-item> <el-form-item v-if="isSendSmsBtn"> <el-button @click="isSendSms" v-prevent-click size="mini" type="primary" >是否需要發送短信</el-button > </el-form-item> <div v-if="sendSmsBtn"> <!-- 表格表單3-2 --> <el-row> <el-col :span="12"> <el-form-item label="手機號:" prop="phoneNumbK"> <el-input v-model="messageObj.phoneNumb" placeholder="接收短信的手機號" > </el-input> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="片區名稱:" prop="areaName"> <el-input v-model="messageObj.areaName" placeholder="片區名稱" > </el-input> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item label="經理姓名:" prop="managerName"> <el-input v-model="messageObj.managerName" placeholder="經理姓名" > </el-input> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="經理手機:" prop="mobile"> <el-input v-model="messageObj.mobile" placeholder="經理手機號" > </el-input> </el-form-item> </el-col> </el-row> <el-form-item> <el-button size="mini" @click="fnsendmessage" v-prevent-click type="primary" >發送短信</el-button > </el-form-item> </div> </el-card> <!-- 提交 --> <el-row> <el-col style="margin-top: 20px; text-align: center; margin-left: -80px" > <el-form-item> <el-button type="primary" v-if="this.form.busiTypeId == 2" @click="confirmSubmit('form')" >保存並發起工單</el-button > <el-button type="primary" @click="saveAccwept('form')" >保存</el-button > </el-form-item> </el-col> </el-row> </el-tab-pane> <el-tab-pane label="歷史受理單"> <el-table height="100%" :data="tableData" v-loading="loading" highlight-current-row ref="multipleTable" > <el-table-column type="index" width="55px"> </el-table-column> <!-- <el-table-column type="selection" width="55px"> </el-table-column> --> <el-table-column prop="id" label="受理編號" show-overflow-tooltip ></el-table-column> <el-table-column prop="busiSoureId" label="業務來源" show-overflow-tooltip > <template slot-scope="scope"> <span>{{ getAcceptSource(scope.row.busiSoureId) }}</span> </template> </el-table-column> <el-table-column prop="busiTypeId" label="業務類型" show-overflow-tooltip > <template slot-scope="scope"> <span>{{ getAcceptType(scope.row.busiTypeId) }}</span> </template> </el-table-column> <el-table-column prop="customName" label="客戶姓名" show-overflow-tooltip ></el-table-column> <el-table-column prop="phoneNumb" label="來源號碼" show-overflow-tooltip ></el-table-column> <!-- <el-table-column prop="subsidiaryName" label="子公司" show-overflow-tooltip > <template slot-scope="scope"> <span>{{ getZigongsiInfo(scope.row.subsidiaryName) }}</span> </template> </el-table-column> --> <el-table-column prop="apccetUserId" label="受理坐席" show-overflow-tooltip ></el-table-column> <el-table-column label="操作" width="200"> <!-- <el-button @click="turnWorkOrder(scope.row)">轉工單</el-button> --> <el-button type="primary" @click="handleDialogInfo(scope.row)" >查看</el-button > <!-- <i class="el-icon-my-check" @click="handleDialogInfo(scope.row)"></i> --> </el-table-column> </el-table> </el-tab-pane> </el-tabs> </el-form> <el-dialog title="受理單詳情" :visible.sync="dialogFormVisible" width="30%" size="tiny" show-close > <chatSummaryForm :dialogId="dialogId"></chatSummaryForm> </el-dialog> </div> </template> <script> import chatSummaryForm from "@/view/common/tabs/chat-summary-form"; // 話后小結表單 export default { name: "outcall", components: { chatSummaryForm, }, props: { /** * 彈窗是否回顯 */ value: { type: Boolean, }, info: { type: Object, }, }, directives: { // 自定義指令-防止按鈕頻發點擊 preventClick: { inserted(el, binding) { el.addEventListener("click", () => { if (!el.disabled) { el.disabled = true; setTimeout(() => { el.disabled = false; }, 6000); } }); }, }, }, data() { return { areaInfoObj: [], // 片區子公司obj option dialogFormVisible: false, labelPosition: "right", options: [], sendSmsBtn: false, tableData: [], isSendSmsBtn: true, dialogId: true, messageObj: { mobile: "", managerName: "", areaName: "", phoneNumb: this.info.contactNumber, // dunaxin: "", }, form: { busiSoureId: "", // 業務來源 busiTypeId: "", // 業務類型 customName: "", // 客戶姓名 phoneNumb: this.info.contactNumber, // 聯系方式-電話號碼 customLevel: "", // 客戶類別 isBuy: "", // 是否購買 // serviceLargeType: "", // 省 // serviceMediumType: "", // 市 // serviceSmallType: "", // 鎮 // subsidiaryName: "", // 子公司 areaInfo: "", // 片區-所屬片區 consultContent: "", // 咨詢內容 dealOpinions: "", // 處理意見 areaManagerName: "", // 片區經理姓名 areaManPhone: "", // 總代理手機號碼 areaAddress: "", // 總代理地址 isSendManager: false, // 是否發送短信 0 否 1 是 complainType: "", // 投訴類型 returnTime: "", // 回訪時間 salesMan: "", // 銷售人員 id: "", }, rules: { busiSoureId: [{ required: true, message: "請選擇業務來源" }], busiTypeId: [{ required: true, message: "請選擇業務類型" }], customName: [ { required: true, message: "請輸入客戶信息", trigger: "change", }, ], phoneNumb: [ { required: true, message: "請輸入聯系方式", trigger: "change", }, ], customLevel: [ { required: true, message: "請選擇客戶類別", trigger: "change", }, ], isBuy: [ { required: true, message: "請選擇是否購買", trigger: "change", }, ], salesMan: [ { required: true, message: "請輸入銷售人員", trigger: "change", }, ], // subsidiaryName: [ // { // required: true, // message: "請輸入子公司", // trigger: "change", // }, // ], areaInfo: [ { required: true, message: "請輸入片區", trigger: "change", }, ], areaAddress: [ { required: true, message: "請輸入總代理地址", trigger: "change", }, ], areaManagerName: [ { required: true, message: "請輸入總代理地址", trigger: "change", }, ], areaManPhone: [ { required: true, message: "請輸入總代理手機號", trigger: "change", }, ], complainType: [ { required: true, message: "請選擇投訴類型", trigger: "change", }, ], consultContent: [ { required: true, message: "請輸入咨詢內容", trigger: "change", }, ], dealOpinions: [ { required: true, message: "請輸入處理意見", trigger: "change", }, ], returnTime: [ { required: true, message: "請輸入回訪時間", trigger: "change", }, ], // phoneNumbK: [ // { // required: true, // message: "短信接收號碼不能為空", // trigger: "change", // }, // ], // areaName: [ // { // required: true, // message: "請輸入回訪時間", // trigger: "change", // }, // ], // managerName: [ // { // required: true, // message: "請輸入回訪時間", // trigger: "change", // }, // ], // mobile: [ // { // required: true, // message: "請輸入回訪時間", // trigger: "change", // }, // ], }, yewulaiyuanObj: [], yewuleixingObj: [], kehuleibieObj: [], shifoumaiObj: [], sourceTypeList: [], // 受理來源 serviceLargeList: [], // 問題類型第1級 serviceMediumList: [], // 問題類型第2級 serviceSmallList: [], // 問題類型第3級 zigongsiObj: [], pianquObj: [], }; }, created() { this.yewulaiyuanObj = JSON.parse( sessionStorage.getItem("dics-getAllDatas") ).HS_BUSI_SOURCE; this.yewuleixingObj = JSON.parse( sessionStorage.getItem("dics-getAllDatas") ).HS_BUSI_TYPE; this.kehuleibieObj = JSON.parse( sessionStorage.getItem("dics-getAllDatas") ).HS_CUSTOM_LEVEL; this.shifoumaiObj = JSON.parse( sessionStorage.getItem("dics-getAllDatas") ).IS_BUY; this.zigongsiObj = JSON.parse( sessionStorage.getItem("dics-getAllDatas") ).SUBDEPT; this.pianquObj = JSON.parse( sessionStorage.getItem("dics-getAllDatas") ).AREA_DICT; this.sourceTypeList = JSON.parse( sessionStorage.getItem("dics-getAllDatas") ).SOURCE_TYPE; this.form.sourceType = this.info.callType; console.log("*******客戶信息*********", this.info); if (this.info.customName != "") { this.form.customName = this.info.customName; } if (this.info.customid != "") { this.selectCustomInfoById(); } console.log("*****呼叫類型********", this.info.callType); console.log(this.value, this.info); this.ajaxgetComplain1(); this.ajaxgetPhoneInfo(); this.selectAccpetInfoByPhone(); this.getAreaOptionObj(); }, computed: {}, methods: { // 調用子公司-片區信息 getAreaOptionObj() { this.$axios .post(this.$apis.ccweb.workOrder.getSubdaryInfoTreeData) .then((res) => { if (res.data) { console.log(res.data); this.areaInfoObj = res.data; } }); }, // 片區和子公司選擇 handleAreaInfoChange(v) { // console.log(v); }, // 根據客戶ID獲取客戶級別 selectAccpetInfoByPhone() { const params = { phoneNumb: this.form.phoneNumb, }; this.$axios .post(this.$apis.ccweb.newDataSL.selectAcceptInfoByPhone, params) .then((res) => { if (res.data) { this.tableData = res.data; } }); }, /** * 來源類型轉換 */ getAcceptSource(annoType) { const selectType = this.yewulaiyuanObj; for (var i in selectType) { if (annoType == selectType[i].key) { return selectType[i].value; } } }, /** * 獲取業務類型 */ getAcceptType(annoType) { const selectType = this.yewuleixingObj; for (var i in selectType) { if (annoType == selectType[i].key) { return selectType[i].value; } } }, /** * 字典通用方法 */ getPianquObjInfo(annoType) { const selectType = this.pianquObj; for (var i in selectType) { if (annoType == selectType[i].key) { return selectType[i].value; } } }, /** * 字典通用方法 */ getZigongsiInfo(annoType) { const selectType = this.zigongsiObj; for (var i in selectType) { if (annoType == selectType[i].key) { return selectType[i].value; } } }, /** * 會話記錄詳情查看方法函數 * @param {object} row 當前行 */ handleDialogInfo(row) { this.dialogId = row.dialogId; this.dialogFormVisible = true; }, // 關閉工單 closeTabwork() { this.$emit("closeTabAccept"); }, // 改變級聯結果的數組為字符串 fnChangeOpt(e) { // console.log(e); if (e && e.length > 0) { this.form.complainType = e.join(","); } else { this.form.complainType = ""; } // console.log(this.form.complainType); }, // 改變級聯結果的數組為字符串 subChangeOpt(e) { // console.log(e); if (e && e.length > 0) { this.form.areaInfo = e.join(","); } else { this.form.areaInfo = ""; } // console.log(this.form.complainType); }, // 獲取投訴類型接口 ajaxgetComplain1() { this.$axios .post(this.$apis.ccweb.newDataSL.getComplainTree) .then((res) => { console.log("投訴類型：", res.data); if (res.data) { this.options = res.data; } }); }, // 根據客戶ID獲取客戶級別 selectCustomInfoById() { const params = { id: this.info.customid, }; this.$axios .post(this.$apis.ccweb.newDataSL.selectCustomInfoById, params) .then((res) => { if (res.data) { this.form.customLevel = res.data.customLevel; } }); }, // 獲取代理信息 ajaxgetPhoneInfo() { const params = { phoneNumber: this.info.contactNumber, }; this.$axios .post(this.$apis.ccweb.newDataSL.getPhoneInfo, params) .then((res) => { console.log(res.data); this.form.areaAddress = res.data.generalAgentAddress; this.form.areaManPhone = res.data.generalAgentMobile; this.form.areaManagerName = res.data.generalAgentName; }); }, isSendSms() { this.sendSmsBtn = true; this.isSendSmsBtn = false; }, // 發送短信 fnsendmessage() { if (this.messageObj.areaName == "") { this.$message.error("片區名稱不能為空"); return; } if (this.messageObj.managerName == "") { this.$message.error("經理姓名不能為空"); return; } if (this.messageObj.mobile == "") { this.$message.error("經理手機號碼不能為空"); return; } if (this.messageObj.phoneNumbK == "") { this.$message.error("客戶號碼不能為空"); return; } // console.log("發送短信", this.messageObj); const params = this.messageObj; this.$axios .post(this.$apis.ccweb.newDataSL.sendSms, params) .then((res) => { if (res) { this.$message({ message: "發送成功!", type: "success", }); this.form.isSendManager = true; } else { this.$message.error("短信發送失敗"); } }); }, confirmSubmit(formName) { this.$confirm("是否發起工單?", "提示", { confirmButtonText: "確定", cancelButtonText: "取消", type: "warning", }) .then(() => { this.onSubmit(formName); }) .catch(() => { // this.$message({ // type: "info", // message: "失敗", // }); }); }, onSubmit(formName) { // if (this.areaInfo.length) { // this.areaInfo = this.areaInfo.toString(); // } // this.areaInfo = this.areaInfo.toString(); // console.log(this.form, "this.form"); this.$refs[formName].validate((valid) => { if (valid) { var obj = { sourceType: this.info.callType, // 電話來源ID0 入呼，1 外呼 dialogId: this.info.dialogId, // 會話ID customId: this.info.customid, // 客戶ID - 第一次沒有 往后返回 id 后端是小寫 這里注意 contactId: this.info.contactId, // 會話客戶信息ID }; // let params = {}; Object.assign(obj, this.form); this.$axios .post(this.$apis.ccweb.newDataSL.insertAcceptInfo, obj) .then((res) => { if (res.code == 200) { this.form.id = res.data.id; this.$message.success("保存受理信息成功"); this.$emit("showWorkOrderPage", res.data); } else { this.$message.error(res.msg || "保存受理信息失敗"); } }); } else { console.log("error submit!!"); return false; } }); }, /** * 保存受理信息 不發起工單 */ saveAccwept(formName) { this.$refs[formName].validate((valid) => { if (valid) { var obj = { sourceType: this.info.callType, // 電話來源ID0 入呼，1 外呼 dialogId: this.info.dialogId, // 會話ID customId: this.info.customid, // 客戶ID - 第一次沒有 往后返回 id 后端是小寫 這里注意 contactId: this.info.contactId, // 會話客戶信息ID }; // let params = {}; Object.assign(obj, this.form); this.$axios .post(this.$apis.ccweb.newDataSL.insertAcceptInfo, obj) .then((res) => { if (res.code == 200) { this.form.id = res.data.id; this.$message.success("保存受理信息成功"); this.closeTabwork(); } else { this.$message.error(res.msg || "保存受理信息失敗"); } }); } else { return false; } }); }, getServiceType(code, type) { console.log(code, type); // code 是選中的值 type是自定義 }, handleClose() { this.$emit("input", false); this.form.call = ""; }, }, }; </script> <style lang="stylus" scoped> /deep/.el-dialog { width: 70% !important; height: 60% !important; overflow: scroll; } /deep/.el-tabs__content { background: #f5fafe; height: 420px; overflow-y: scroll; .el-tab-pane { } } .el-textarea { textarea { padding: 8px; // 設置文本框的 padding height: $inputHeight; // 設置文本框的 height font-size: $inputFontSize; line-height: 21px; } } .shouliTab { // 表單框 padding: 10px; overflow-y: scroll; height: 100%; } .hr { width: 100%; height: 1px; background: #ccc; margin: 10px 0; } .el-card{ padding:12px; } .detail { p { padding-left: 10px; line-height: 30px; font-size: 16px; color: #606266; } } </style>
