From d19fd32eb0692166230762146f1370da82775074 Mon Sep 17 00:00:00 2001 From: XiaoRuby <3114200645@qq.com> Date: 星期一, 28 八月 2023 14:08:08 +0800 Subject: [PATCH] Crunchy-08/28合区代码 --- src/components/view/measurementManagement.vue | 739 +++++++++++++++++++++++++++++++++++++------------------- 1 files changed, 483 insertions(+), 256 deletions(-) diff --git a/src/components/view/measurementManagement.vue b/src/components/view/measurementManagement.vue index 8865a88..fbd1415 100644 --- a/src/components/view/measurementManagement.vue +++ b/src/components/view/measurementManagement.vue @@ -327,6 +327,7 @@ v-show="viewResume == true" type="primary" size="mini" + @click="sunmitPlanForm" icon="el-icon-plus" :style="`background: #3a7bfa; opacity: ${addShow ? 1 : 0}`" >淇濆瓨</el-button @@ -334,242 +335,376 @@ </el-col> </el-row> <div class="second_div_main"> - <div class="second_div_top"> - <el-descriptions - class="secode_div_top_descriptions" - v-show="viewResume == false" - > - <template slot="title"> - <span>璁″垝淇℃伅</span> - <span - v-show="measurePlanPage.accountOrPlan == false" - :style=" - `font-size: 14px; color: ${okOrNo == 'y' ? 'green' : 'red'}` - " - > {{ okOrNo == "y" ? "宸插畬鎴�" : "鏈畬鎴�" }}</span - > - </template> - <el-descriptions-item label="璁″垝缂栧彿">{{ - measureTop.plan_number - }}</el-descriptions-item> - <el-descriptions-item label="鍒涘缓浜�">{{ - measureTop.founder - }}</el-descriptions-item> - <el-descriptions-item label="鍒涘缓鏃ユ湡">{{ - measureTop.createTime - }}</el-descriptions-item> - <el-descriptions-item label="璁″垝鏃ユ湡">{{ - measureTop.planTime - }}</el-descriptions-item> - <el-descriptions-item label="璁″垝鍗曚綅">{{ - measureTop.plan_unit - }}</el-descriptions-item> - <el-descriptions-item label="璐熻矗浜�">{{ - measureTop.person_charge - }}</el-descriptions-item> - </el-descriptions> - <el-descriptions - class="secode_div_top_descriptions" - v-show="viewResume == true" - > - <template slot="title"> - <span>璁″垝淇℃伅</span> - </template> + <el-form :model="addFormDevice" :rules="rules" ref="ruleFormDevice"> + <!-- form琛ㄥ崟 --> + <div class="second_div_top"> + <el-descriptions + class="secode_div_top_descriptions" + v-show="viewResume == false" > - <el-descriptions-item label="璁″垝鏃ユ湡"> - <el-date-picker - v-model="value1" - type="datetime" - placeholder="閫夋嫨鏃ユ湡鏃堕棿" - > - </el-date-picker> - </el-descriptions-item> - <el-descriptions-item label="璁″垝鍗曚綅"> - <el-input - style="width: 206px" - placeholder="璇疯緭鍏ヨ鍒掑崟浣�" - clearable - v-model="addFormDevice.planningUnit" - ></el-input - ></el-descriptions-item> - <el-descriptions-item label="璐熻矗浜�"> - <el-select - v-model="addFormDevice.responsiblePerson" - size="small" - placeholder="璐熻矗浜�" - class="table_top" - > - <el-option - v-for="item in createPerson" - :key="item.index" - :label="item.name" - :value="item.id" - ></el-option> - </el-select> - </el-descriptions-item> - </el-descriptions> - </div> - <div class="second_div_middle"> - <div class="el_divider_span">璁惧淇℃伅</div> - <el-divider></el-divider> - </div> - <div class="second_div_table"> - <div style="float: right;padding-bottom: 8px"> - <el-button size="mini" type="primary" @click="addDeviceAdd"> - <span style="font-size: 14px;">鏂板璁惧</span></el-button - > - </div> - <div v-show="viewResume == true"> - <el-table - ref="multipleTable" - tooltip-effect="dark" - :data="addFormDevice.addDevice" - border - :Key="key" - style="width: 100%; margin-top: 12px;" - height="calc(100vh - 380px)" - > - <el-table-column type="selection" width="55" min-width="5%"> - </el-table-column> - <el-table-column label="浠櫒璁惧缂栫爜" min-width="10%" prop="code"> - </el-table-column> - <el-table-column label="浠櫒璁惧鍚嶇О" min-width="10%" prop="name"> - <template scope="scope"> - <el-select - v-model="scope.row.deviceId" - @change="nameAndCode(scope)" - size="small" - placeholder="璇烽�夋嫨璁惧" - class="table_top" - > - <el-option - v-for="item in deviceIdAndNameAndCode" - :key="item.index" - :label="item.name" - :value="item.id" - ></el-option> - </el-select> - </template> - </el-table-column> - <el-table-column - label="娴嬮噺鑼冨洿" - min-width="10%" - ></el-table-column> - <el-table-column - label="璁¢噺鍛ㄦ湡" - min-width="10%" - ></el-table-column> - <el-table-column - label="璁¢噺缁撴灉" - min-width="10%" - ></el-table-column> - <el-table-column - label="璁¢噺鏃ユ湡" - min-width="10%" - ></el-table-column> - <el-table-column - label="璁¢噺鏈夋晥鏈�" - min-width="10%" - ></el-table-column> - <el-table-column label="鎿嶄綔" min-width="10%"> - <el-button type="text" size="mini">浣滃簾</el-button> - </el-table-column> - </el-table> - </div> - <div v-show="viewResume == false"> - <el-table - :data="recordData" - tooltip-effect="dark" - :header-cell-style="{ 'text-align': 'center' }" - border - :row-style="{ height: '50px' }" - :cell-style="{ padding: '0px', 'text-align': 'center' }" - style="width: 100%; margin-top: 12px;" - height="calc(100vh - 382px)" - > - <el-table-column - label="浠櫒璁惧缂栫爜" - prop="code" - ></el-table-column> - <el-table-column - label="浠櫒璁惧鍚嶇О" - prop="name" - ></el-table-column> - <el-table-column - label="娴嬮噺鑼冨洿" - prop="measuring_range" - ></el-table-column> - <el-table-column - label="璁¢噺鍛ㄦ湡" - prop="measure_period" - ></el-table-column> - <el-table-column label="璁¢噺缁撴灉" prop="measure_result"> - <template slot-scope="scope"> - <el-tag - v-if="scope.row.measure_result == 1" - disable-transitions - type="success" - >杩愯</el-tag - > - <el-tag - v-else-if="scope.row.measure_result == 2" - disable-transitions - type="danger" - >澶卞噯</el-tag - > - <el-tag - v-else-if="scope.row.measure_result == null" - disable-transitions - type="info" - >鏈閲�</el-tag - > - </template></el-table-column - > - <el-table-column - label="璁¢噺鏃ユ湡" - prop="measureDate" - ></el-table-column> - <el-table-column - label="璁¢噺鏈夋晥鏈�" - prop="validityEnd" - ></el-table-column> - <el-table-column - label="璐熻矗浜�" - prop="personCharge" - ></el-table-column> - <el-table-column - label="鍒涘缓鏃ユ湡" - prop="createTime" - ></el-table-column> - <el-table-column label="鍒涘缓浜�" prop="founder"></el-table-column> - <el-table-column - label="璁¢噺鍗曚綅" - prop="plan_unit" - ></el-table-column> - <el-table-column - width="200px" - label="璁¢噺缂栧彿" - prop="measure_number" - ></el-table-column> - </el-table> + <template slot="title"> + <span>璁″垝淇℃伅</span> + <span + v-show="measurePlanPage.accountOrPlan == false" + :style=" + `font-size: 14px; color: ${okOrNo == 'y' ? 'green' : 'red'}` + " + > {{ okOrNo == "y" ? "宸插畬鎴�" : "鏈畬鎴�" }}</span + > + </template> + <el-descriptions-item label="璁″垝缂栧彿">{{ + measureTop.plan_number + }}</el-descriptions-item> + <el-descriptions-item label="鍒涘缓浜�">{{ + measureTop.founder + }}</el-descriptions-item> + <el-descriptions-item label="鍒涘缓鏃ユ湡">{{ + measureTop.createTime + }}</el-descriptions-item> + <el-descriptions-item label="璁″垝鏃ユ湡">{{ + measureTop.planTime + }}</el-descriptions-item> + <el-descriptions-item label="璁″垝鍗曚綅">{{ + measureTop.plan_unit + }}</el-descriptions-item> + <el-descriptions-item label="璐熻矗浜�">{{ + measureTop.person_charge + }}</el-descriptions-item> + </el-descriptions> <div - class="middle_under_div" - v-show="measurePlanPage.accountOrPlan == false" + class="secode_div_top_descriptions_add" + v-show="viewResume == true" > - <el-pagination - @size-change="handleSizeChange" - @current-change="handleCurrentChange" - :current-page="currentPage" - :page-sizes="[10, 15, 20, 25]" - :pager-count="9" - :page-size="12" - layout="total, sizes, prev, pager, next, jumper" - :total="measurePlanPageTotal" + <el-form-item + required + prop="plannedDate" + label="璁″垝鏃ユ湡锛�" + style="width: 30%" > - </el-pagination> + <el-date-picker + v-model="addFormDevice.plannedDate" + value-format="yyyy-MM-dd" + type="daterange" + range-separator="~" + start-placeholder="寮�濮嬫棩鏈�" + end-placeholder="缁撴潫鏃ユ湡" + > + </el-date-picker> + </el-form-item> + <el-form-item + label="璁″垝鍗曚綅锛�" + prop="planUnit" + required + style="width: 20%" + > + <el-input + style="width: 206px" + placeholder="璇疯緭鍏ヨ鍒掑崟浣�" + clearable + v-model="addFormDevice.planUnit" + ></el-input> + </el-form-item> + <el-form-item + label="璐熻矗浜猴細" + prop="personCharge" + required + style="width: 20%" + > + <el-select + v-model="addFormDevice.personCharge" + style="width: 206px" + placeholder="璐熻矗浜�" + class="table_top" + > + <el-option + v-for="item in createPerson" + :key="item.index" + :label="item.name" + :value="item.id" + ></el-option> + </el-select> + </el-form-item> </div> </div> - </div> + <div class="second_div_middle"> + <div class="el_divider_span">璁惧淇℃伅</div> + <el-divider></el-divider> + </div> + <div class="second_div_table"> + <div style="float: right;padding-bottom: 8px"> + <el-button size="mini" type="primary" @click="addDeviceAdd"> + <span style="font-size: 14px;">鏂板璁惧</span></el-button + > + </div> + <div v-show="viewResume == true"> + <el-table + ref="multipleTableDevice" + tooltip-effect="dark" + :data="addFormDevice.measureLedgerList" + header-cell-class-name="addHeaderCellClassName" + border + class="end_table" + height="calc(100vh - 380px)" + > + <el-table-column + label="浠櫒璁惧缂栫爜" + min-width="10%" + prop="code" + > + </el-table-column> + <el-table-column min-width="10%" prop="name"> + <template slot="header"> + <span class="requiredclass">浠櫒璁惧鍚嶇О</span> + </template> + <template scope="scope"> + <el-form-item + :prop="`measureLedgerList[` + scope.$index + `].deviceId`" + :rules="{ + required: true, + trigger: 'change' + }" + > + <el-select + v-model="scope.row.deviceId" + @change="nameAndCode(scope)" + size="small" + placeholder="璇烽�夋嫨璁惧" + class="table_top" + > + <el-option + v-for="item in deviceIdAndNameAndCode" + :key="item.index" + :label="item.name" + :value="item.id" + ></el-option> + </el-select> + </el-form-item> + </template> + </el-table-column> + <el-table-column label="娴嬮噺鑼冨洿" min-width="10%"> + <template scope="scope"> + <el-form-item + :prop=" + `measureLedgerList[` + scope.$index + `].measuringRange` + " + :rules="{ + required: true, + trigger: 'blur' + }" + > + <el-input + placeholder="璇疯緭鍏ユ祴閲忚寖鍥�" + clearable + size="small" + v-model=" + addFormDevice.measureLedgerList[scope.$index] + .measuringRange + " + ></el-input> + </el-form-item> + </template> + </el-table-column> + <el-table-column label="璁¢噺鍛ㄦ湡" min-width="5%"> + <template scope="scope"> + <span + v-show=" + addFormDevice.measureLedgerList[scope.$index] + .measurePeriod !== '' + " + >{{ + addFormDevice.measureLedgerList[scope.$index] + .measurePeriod + }}/鏈�</span + > + </template> + </el-table-column> + <el-table-column label="璁¢噺缁撴灉" min-width="10%"> + <template scope="scope"> + <el-select + v-model=" + addFormDevice.measureLedgerList[scope.$index] + .measureResult + " + style="padding-top: 4px;" + size="small" + placeholder="璇烽�夋嫨璁¢噺缁撴灉" + class="table_top" + > + <el-option label="姝e父" value="1"></el-option> + <el-option label="澶卞噯" value="2"></el-option> + </el-select> </template + ></el-table-column> + <el-table-column width="200px"> + <template slot="header"> + <span class="requiredclass">璁¢噺鏃ユ湡</span> + </template> + <template scope="scope"> + <el-form-item + :prop=" + `measureLedgerList[` + scope.$index + `].measureDate` + " + :rules="{ + required: true, + trigger: 'change' + }" + > + <el-date-picker + size="small" + style="width: 150px;" + v-model=" + addFormDevice.measureLedgerList[scope.$index] + .measureDate + " + value-format="yyyy-MM-dd" + type="date" + placeholder="閫夋嫨鏃ユ湡" + > + </el-date-picker> + </el-form-item> + </template> + </el-table-column> + <el-table-column width="300px"> + <template slot="header"> + <span class="requiredclass">璁¢噺鏈夋晥鏈�</span> + </template> + <template scope="scope"> + <el-form-item + :prop=" + `measureLedgerList[` + scope.$index + `].planDateList` + " + :rules="{ + required: true, + trigger: 'change' + }" + > + <el-date-picker + v-model=" + addFormDevice.measureLedgerList[scope.$index] + .planDateList + " + value-format="yyyy-MM-dd" + size="small" + style="width: 270px" + @change="pickerplanDateList(scope)" + type="daterange" + range-separator="~" + start-placeholder="寮�濮嬫棩鏈�" + end-placeholder="缁撴潫鏃ユ湡" + > + </el-date-picker> + </el-form-item> + </template> + </el-table-column> + <el-table-column label="鎿嶄綔" min-width="10%"> + <template scope="scope"> + <el-button + type="text" + size="mini" + @click="measureLedgerListDelete(scope)" + >鍒犻櫎</el-button + > + </template> + </el-table-column> + </el-table> + </div> + <div v-show="viewResume == false"> + <el-table + :data="recordData" + tooltip-effect="dark" + :header-cell-style="{ 'text-align': 'center' }" + border + :row-style="{ height: '50px' }" + :cell-style="{ padding: '0px', 'text-align': 'center' }" + style="width: 100%; margin-top: 12px;" + height="calc(100vh - 400px)" + > + <el-table-column + label="浠櫒璁惧缂栫爜" + prop="code" + ></el-table-column> + <el-table-column + label="浠櫒璁惧鍚嶇О" + prop="name" + ></el-table-column> + <el-table-column + label="娴嬮噺鑼冨洿" + prop="measuring_range" + ></el-table-column> + <el-table-column + label="璁¢噺鍛ㄦ湡" + prop="measure_period" + ></el-table-column> + <el-table-column label="璁¢噺缁撴灉" prop="measure_result"> + <template slot-scope="scope"> + <el-tag + v-if="scope.row.measure_result == 1" + disable-transitions + type="success" + >杩愯</el-tag + > + <el-tag + v-else-if="scope.row.measure_result == 2" + disable-transitions + type="danger" + >澶卞噯</el-tag + > + <el-tag + v-else-if="scope.row.measure_result == null" + disable-transitions + type="info" + >鏈閲�</el-tag + > + </template></el-table-column + > + <el-table-column + label="璁¢噺鏃ユ湡" + prop="measureDate" + ></el-table-column> + <el-table-column + label="璁¢噺鏈夋晥鏈�" + prop="validityEnd" + ></el-table-column> + <el-table-column + label="璐熻矗浜�" + prop="personCharge" + ></el-table-column> + <el-table-column + label="鍒涘缓鏃ユ湡" + prop="createTime" + ></el-table-column> + <el-table-column + label="鍒涘缓浜�" + prop="founder" + ></el-table-column> + <el-table-column + label="璁¢噺鍗曚綅" + prop="plan_unit" + ></el-table-column> + <el-table-column + width="200px" + label="璁¢噺缂栧彿" + prop="measure_number" + ></el-table-column> + </el-table> + <div + class="middle_under_div" + v-show="measurePlanPage.accountOrPlan == false" + > + <el-pagination + @size-change="handleSizeChange" + @current-change="handleCurrentChange" + :current-page="currentPage" + :page-sizes="[10, 15, 20, 25]" + :pager-count="9" + :page-size="12" + layout="total, sizes, prev, pager, next, jumper" + :total="measurePlanPageTotal" + > + </el-pagination> + </div> + </div> + </div> + </el-form> </div> </div> </div> @@ -622,14 +757,37 @@ measureTop: {}, measurePlanPageTotal: "", okOrNo: "", - value1: "", deviceIdAndNameAndCode: [], addFormDevice: { - responsiblePerson: "", //璐熻矗浜� - planningUnit: "", // 璁″垝鍗曚綅 - addDevice: [] + plannedDate: [], // 璁″垝鏃ユ湡寮�濮嬫椂闂寸粨鏉熸椂闂撮�夋嫨鍣� + planDateBegin: "", // 璁″垝鏃ユ湡寮�濮嬫椂闂� + planDateEnd: "", // 璁″垝鏃ユ湡缁撴潫鏃堕棿 + personCharge: "", //璐熻矗浜� + planUnit: "", // 璁″垝鍗曚綅 + measureLedgerList: [] }, - createPerson: [] // 鍒涘缓浜哄垪琛� + createPerson: [], // 鍒涘缓浜哄垪琛� + rules: { + planUnit: [ + { required: true, message: "璇疯緭鍏ヨ鍒掑崟浣�", trigger: "blur" }, + { min: 1, max: 25, message: "闀垮害鍦� 1 鍒� 25 涓瓧绗�", trigger: "blur" } + ], + personCharge: [ + { required: true, message: "璇烽�夋嫨璐熻矗浜�", trigger: "change" } + ], + plannedDate: [ + { + type: "array", + required: true, + message: "璇烽�夋嫨璁″垝鏃ユ湡鍖洪棿", + fields: { + //tpye绫诲瀷璇曟儏鍐佃�屽畾,鎵�浠ュ鏋滆繑鍥炵殑鏄痙ate灏辨敼鎴恉ate + 0: { type: "string", required: true, message: "璇烽�夋嫨寮�濮嬫棩鏈�" }, + 1: { type: "string", required: true, message: "璇烽�夋嫨缁撴潫鏃ユ湡" } + } + } + ] + } }; }, mounted() { @@ -716,7 +874,6 @@ params: this.measurePlanPage }) .then(res => { - console.log(`output->res.data`, res.data[0]); this.recordData = res.data.table; this.measureTop = res.data.top; this.measurePlanPageTotal = res.data.total; @@ -726,30 +883,76 @@ } }, addDeviceAdd() { - let obj = { + let measureLedgerList = { code: "", - deviceId: "", - measureDate: "2023-08-16", - measurePeriod: 12, - measureResult: 0, - measuringRange: "0.2302", - validityBegin: "2023-08-16", - validityEnd: "2023-08-16" + measureDate: "", + planDateList: "", // 缂撳瓨鏁版嵁 + measurePeriod: "", + measureResult: "", + measuringRange: "", + validityBegin: "", + validityEnd: "" }; - this.addFormDevice.addDevice.push(obj); + this.addFormDevice.measureLedgerList.push(measureLedgerList); }, nameAndCode(scope) { - let index = this.deviceIdAndNameAndCode.find( + let deviceMessage = this.deviceIdAndNameAndCode.find( role => role.id === scope.row.deviceId ); - this.addDeviceAdd.code = index.code; - this.addFormDevice.addDevice[scope.$index].push = this.addDeviceAdd; - this.$nextTick(() => { - this.key++; + this.addFormDevice.measureLedgerList[scope.$index].code = + deviceMessage.code; + }, + addHeaderCellClassName({ columnIndex }) { + if (columnIndex === 0 || columnIndex === 1) { + return "requiredclass"; + } + }, + pickerplanDateList(scope) { + let begin = scope.row.planDateList[0]; + let end = scope.row.planDateList[1]; + this.addFormDevice.measureLedgerList[scope.$index].validityBegin = begin; + this.addFormDevice.measureLedgerList[scope.$index].validityEnd = end; + + let StartDate = begin.split("-"); + let EndDate = end.split("-"); + let dayDate = EndDate[2] - StartDate[2]; + + EndDate = parseInt(EndDate[0]) * 12 + parseInt(EndDate[1]); + StartDate = parseInt(StartDate[0]) * 12 + parseInt(StartDate[1]); + + let resultDate = EndDate - StartDate + 1; + this.addFormDevice.measureLedgerList[ + scope.$index + ].measurePeriod = resultDate; + }, + measureLedgerListDelete(scope) { + this.addFormDevice.measureLedgerList.splice(scope.$index, 1); + }, + sunmitPlanForm() { + this.$refs.ruleFormDevice.validate(valid => { + if (valid) { + this.addFormDevice.planDateBegin = this.addFormDevice.plannedDate[0]; + this.addFormDevice.planDateEnd = this.addFormDevice.plannedDate[1]; + delete this.addFormDevice.plannedDate; + this.addFormDevice.measureLedgerList.forEach(i => { + i.validityBegin = i.planDateList[0]; + i.validityEnd = i.planDateList[1]; + delete i.planDateList; + }); + this.$axios + .post(this.$api.url.meteringPlanDevicePlan, this.addFormDevice, { + headers: { "Content-Type": "application/json" } + }) + .then(res => { + this.$message({ + message: res.message, + type: "success" + }); + this.addShow = false; + }); + } }); - // addDevice - console.log(`output->this.addDe`, this.addFormDevice); } }, watch: { @@ -779,7 +982,7 @@ }; </script> -<style> +<style less="scss"> .main_div { height: calc(100vh - 110px); position: relative; @@ -795,6 +998,23 @@ height: calc(100vh - 110px); transition: 0.5s; } +.secode_div_top_descriptions_add { + padding-left: 30px; + padding-top: 48px; + + .el-form-item { + float: left; + } +} +.end_table { + width: 100%; + margin-top: 12px; + + .cell { + height: 40px; + } +} + .top_div { width: 100%; height: 100px; @@ -838,7 +1058,6 @@ padding: 35px 0; } .el-descriptions-item__label { - padding-top: 8px !important; height: 20px !important; } .el-input__prefix { @@ -896,8 +1115,16 @@ padding-bottom: 15px; } .secode_div_top_descriptions { - padding-left: 20px; - padding-top: 10px; + padding-left: 30px; + padding-top: 17px; +} +.secode_div_top_descriptions .el-form-item { + float: left; +} +.requiredclass::before { + content: "*"; + color: #f56c6c; + margin-right: 6px; } .el-descriptions__title { font-size: 15px; -- Gitblit v1.9.3