From 0607e1ce79787ef81d40e56d417e184bc7dcb2ae Mon Sep 17 00:00:00 2001 From: MrShi <1878285526@qq.com> Date: 星期六, 27 一月 2024 11:42:36 +0800 Subject: [PATCH] Mr.Shi --- platform/src/components/business/OperaDispatchUnitWindow.vue | 472 ++++++++++++++++++++++++++++++++-------------------------- 1 files changed, 260 insertions(+), 212 deletions(-) diff --git a/platform/src/components/business/OperaDispatchUnitWindow.vue b/platform/src/components/business/OperaDispatchUnitWindow.vue index 3593eed..a9d80df 100644 --- a/platform/src/components/business/OperaDispatchUnitWindow.vue +++ b/platform/src/components/business/OperaDispatchUnitWindow.vue @@ -1,244 +1,292 @@ <template> <GlobalWindow :title="title" - width="50%" :visible.sync="visible" :confirm-working="isWorking" @confirm="confirm" > - <div class="box"> - <div class="box_label">娲鹃仯鍗曚綅璇︽儏</div> - <div class="box_list"> - <div class="box_list_item"> - <div class="box_list_item_label">娲鹃仯鍗曚綅锛�</div> - <div class="box_list_item_val">鑺滄箹鏍煎姏绮惧瘑鍒堕�犳湁闄愬叕鍙�</div> - </div> - <div class="box_list_item"> - <div class="box_list_item_label">娲鹃仯鍗曚綅淇$敤浠g爜锛�</div> - <div class="box_list_item_val">913401000900000001</div> - </div> - <div class="box_list_item"> - <div class="box_list_item_label">娲鹃仯鍗曚綅鐘舵�侊細</div> - <div class="box_list_item_val">宸查�氳繃</div> - </div> - <div class="box_list_item"> - <div class="box_list_item_label">娲鹃仯鍗曚綅璇﹁堪锛�</div> - <div class="box_list_item_val">鏃�</div> - </div> - </div> - <div class="box_x"></div> - <div class="box_fa">淇濋櫓鏂规锛氬钩瀹変繚闄╅泧涓昏矗浠婚櫓A鐗�</div> - <el-table - :data="tableData" - border - style="width: 100%"> - <el-table-column - label="搴忓彿" - align="center" - width="80"> - <template slot-scope="scope"> - <span>{{scope.$index + 1}}</span> - </template> - </el-table-column> - <el-table-column - align="center" - label="鎵�灞炲伐绉�"> - <template slot-scope="{row}"> - <el-select v-model="row.info" placeholder="璇烽�夋嫨"> + <el-form :model="form" ref="form" :rules="rules"> + <el-form-item label="娲鹃仯鍗曚綅鍚嶇О" prop="name"> + <el-input v-model="form.name" placeholder="璇疯緭鍏�" v-trim/> + </el-form-item> + <el-form-item label="娲鹃仯鍗曚綅淇$敤浠g爜" prop="code"> + <el-input v-model="form.code" placeholder="璇疯緭鍏�" v-trim/> + </el-form-item> + <el-form-item label="娲鹃仯鍗曚綅鎻忚堪" prop="content"> + <el-input v-model="form.content" placeholder="璇疯緭鍏�" v-trim/> + </el-form-item> + </el-form> + <div class="list"> + <el-button type="primary" style="margin-bottom: 15px;" @click="add">娣诲姞鏂规</el-button> + <div class="list_item" v-for="(item, index) in form.saveDuSolutionDTOList" :key="index"> + <div class="list_item_input"> + <div class="list_item_input_label"><span>*</span>淇濋櫓鏂规</div> + <div class="list_item_input_val"> + <el-select v-model="item.solutionId" @change="changeTypeWork($event, index)" placeholder="璇烽�夋嫨"> <el-option - v-for="item in options" - :key="item.value" - :label="item.label" - :value="item.value"> + v-for="item in insuranceScheme" + :key="item.id" + :label="item.name" + :value="item.id"> </el-option> </el-select> - </template> - </el-table-column> - <el-table-column - label="瀹℃牳閫氳繃鏃ユ湡" - width="150" - align="center" - prop="time"> - </el-table-column> - </el-table> - <div class="box_videos"> - <div class="box_videos_item" v-for="(item,index) in 1" :key="index"> - <video src="https://baidu.com"></video> - <div class="box_videos_item_info"> - 1-3绫� 钄彍/鍥壓宸�/瀹剁瀹剁暅楗插吇浜哄憳 + <div style="display: flex; align-items: center;"> + <el-button type="primary" @click="addItem(index)">娣诲姞</el-button> + <el-button type="danger" @click="deleItem(index)">鍒犻櫎</el-button> + </div> </div> </div> - </div> - <div class="box_fa">淇濋櫓鏂规锛氬钩瀹変繚闄╅泧涓昏矗浠婚櫓A鐗�</div> - <el-table - :data="tableData" - border - style="width: 100%"> - <el-table-column - label="搴忓彿" - align="center" - width="80"> - <template slot-scope="scope"> - <span>{{scope.$index + 1}}</span> - </template> - </el-table-column> - <el-table-column - align="center" - label="鎵�灞炲伐绉�"> - <template slot-scope="{row}"> - <el-select v-model="row.info" placeholder="璇烽�夋嫨"> - <el-option - v-for="item in options" - :key="item.value" - :label="item.label" - :value="item.value"> - </el-option> - </el-select> - </template> - </el-table-column> - <el-table-column - label="瀹℃牳閫氳繃鏃ユ湡" - width="150" - align="center" - prop="time"> - </el-table-column> - </el-table> - <div class="box_videos"> - <div class="box_videos_item" v-for="(item,index) in 1" :key="index"> - <video src="https://baidu.com"></video> - <div class="box_videos_item_info"> - 1-3绫� 钄彍/鍥壓宸�/瀹剁瀹剁暅楗插吇浜哄憳 - </div> + <div class="list_item_table"> + <el-table + :data="item.saveDuWorkTypeDTOList" + border + style="width: 100%"> + <el-table-column label="搴忓彿" width="80px"> + <template slot-scope="scope"> + <span>{{scope.$index + 1}}</span> + </template> + </el-table-column> + <el-table-column + prop="name" + label="鎵�灞炲伐绉�"> + <template slot-scope="scope"> + <el-select v-model="scope.row.workTypeId" @change="changeGZ($event, index, scope.$index)" placeholder="璇烽�夋嫨"> + <el-option + v-for="item in item.typeWork" + :key="item.id" + :label="item.name" + :value="item.id"> + </el-option> + </el-select> + </template> + </el-table-column> + <el-table-column + prop="address" + label="鎿嶄綔瑙嗛锛堥潪蹇呭~锛�"> + <template slot-scope="scope"> + <div style="width: 100px; height: 100px;"> + <UploadAvatarVideo :uploadData="{ folder: 'unit' }" :file="scope.row.file" @uploadSuccess="result($event, index, scope.$index)" /> + </div> + </template> + </el-table-column> + <el-table-column + label="鎿嶄綔" + width="90" + fixed="right"> + <template slot-scope="scope"> + <el-button type="text" @click="dele(index, scope.$index)">鍒犻櫎</el-button> + </template> + </el-table-column> + </el-table> </div> </div> - <div class="box_label">瀹℃牳娴佺▼</div> - <el-timeline :reverse="reverse" style="margin-top: 20px;"> - <el-timeline-item - v-for="(activity, index) in activities" - :key="index" - :timestamp="activity.timestamp"> - {{activity.content}} - </el-timeline-item> - </el-timeline> </div> </GlobalWindow> </template> <script> - import BaseOpera from '@/components/base/BaseOpera' - import GlobalWindow from '@/components/common/GlobalWindow' - export default { - name: 'OperaDispatchUnitWindow', - extends: BaseOpera, - components: { GlobalWindow }, - data () { - return { - reverse: true, - activities: [{ - content: '鎻愪氦娲鹃仯鍗曚綅', - timestamp: '鎿嶄綔鍛�-寮犱紵锛堝畨寰借眴绫崇鎶�鏈夐檺鍏徃锛塡n' + - '\n' + - '2023-09-11 00:00:00' - }, { - content: '娲鹃仯鍗曚綅閫氳繃\n' + - '\n' + - '\n' + - '鎻愪氦鎰忚锛�-', - timestamp: '鎿嶄綔鍛�-鍙舵樉楠忥紙骞冲彴绔級\n' + - '\n' + - '2023-09-11 00:00:00' - }], - // 琛ㄥ崟鏁版嵁 - form: { - id: null, - worktypeStatus: '' - }, - // 楠岃瘉瑙勫垯 - rules: { - }, - tableData: [] - } - }, - created () { - this.config({ - api: '/business/dispatchUnit', - 'field.id': 'id' - }) - } +import BaseOpera from '@/components/base/BaseOpera' +import GlobalWindow from '@/components/common/GlobalWindow' +import UploadAvatarVideo from '@/components/common/UploadAvatarVideo' +import { all } from '@/api/business/solutions' +import { findListByDTO } from '@/api/business/worktype' +export default { + name: 'OperaDispatchUnitWindow', + extends: BaseOpera, + components: { GlobalWindow, UploadAvatarVideo }, + data () { + return { + // 琛ㄥ崟鏁版嵁 + form: { + id: null, + name: '', + code: '', + content: '', + saveDuSolutionDTOList: [ + { + id: '', + saveDuWorkTypeDTOList: [ + { + videoUrl: '', + workTypeId: '', + workTypeName: '', + file: { + videourl: '', + videourlfull: '' + } + } + ], + typeWork: [], + solutionId: '', + solutionName: '' + } + ] + }, + // 楠岃瘉瑙勫垯 + rules: { + name: [ + { required: true, message: '璇疯緭鍏ユ淳閬e崟浣嶅悕绉�' } + ], + code: [ + { required: true, message: '璇疯緭鍏ユ淳閬e崟浣嶄俊鐢ㄤ唬鐮�' } + ], + content: [ + { required: true, message: '璇疯緭鍏ユ淳閬e崟浣嶆弿杩�' } + ] + }, + insuranceScheme: [] } + }, + created () { + this.config({ + api: '/business/dispatchUnit', + 'field.id': 'id' + }) + all({}) + .then(res => { + this.insuranceScheme = res + }) + }, + methods: { + open (title, target) { + this.title = title + this.visible = true + this.form.saveDuSolutionDTOList = [ + { + id: '', + saveDuWorkTypeDTOList: [ + { + videoUrl: '', + workTypeId: '', + workTypeName: '', + file: { + videourl: '', + videourlfull: '' + } + } + ], + typeWork: [], + solutionId: '', + solutionName: '' + } + ] + // 鏂板缓 + if (target == null) { + this.$nextTick(() => { + this.$refs.form.resetFields() + this.form[this.configData['field.id']] = null + }) + return + } + // 缂栬緫 + this.$nextTick(() => { + for (const key in this.form) { + this.form[key] = target[key] + } + }) + }, + // 鍒囨崲宸ョ + changeGZ(a, b, c) { + let text = '' + this.form.saveDuSolutionDTOList[b].typeWork.forEach(item => { + if (item.id === a) { + text = item.name + } + }) + this.form.saveDuSolutionDTOList[b].saveDuWorkTypeDTOList[c].workTypeName = text + }, + // 鍒囨崲鏂规 + changeTypeWork(id, index) { + findListByDTO({ queryType: 0, id }) + .then(res => { + this.form.saveDuSolutionDTOList[index].typeWork = res + }) + let text = '' + this.insuranceScheme.forEach(item => { + if (item.id === id) { + text = item.name + } + }) + this.form.saveDuSolutionDTOList[index].solutionName = text + }, + add() { + this.form.saveDuSolutionDTOList.unshift({ + id: '', + saveDuWorkTypeDTOList: [ + { + videoUrl: '', + workTypeId: '', + file: { + videourl: '', + videourlfull: '' + } + } + ], + solutionId: '' + }) + }, + addItem(index) { + this.form.saveDuSolutionDTOList[index].saveDuWorkTypeDTOList.push({ + videoUrl: '', + workTypeId: '', + file: { + videourl: '', + videourlfull: '' + } + }) + }, + deleItem(index) { + if (this.form.saveDuSolutionDTOList.length === 1) { + this.$message.warning('鑷冲皯淇濈暀涓�椤瑰唴瀹�') + return + } + this.form.saveDuSolutionDTOList.splice(index, 1) + }, + result(e, a, b) { + this.form.saveDuSolutionDTOList[a].saveDuWorkTypeDTOList[b].videoUrl = e.imgurl + }, + dele(a, b) { + if (this.form.saveDuSolutionDTOList[a].saveDuWorkTypeDTOList.length === 1) { + this.$message.warning('鑷冲皯淇濈暀涓�椤瑰唴瀹�') + return + } + this.form.saveDuSolutionDTOList[a].saveDuWorkTypeDTOList.splice(b, 1) + } + } +} </script> <style lang="scss" scoped> - .box { + .list { width: 100%; - .box_label { - font-size: 20px; - font-weight: 600; - margin-bottom: 10px; - } - .box_list { + margin-bottom: 20px; + .list_item { width: 100%; - display: flex; - align-items: center; - flex-wrap: wrap; - justify-content: space-between; - .box_list_item { - width: 33.3%; - display: flex; - align-items: center; - margin-top: 10px; - .box_list_item_label { - flex-shrink: 0; + margin-bottom: 20px; + &:last-child { + margin: 0 !important; + } + .list_item_input { + width: 100%; + margin-bottom: 15px; + .list_item_input_label { + margin-bottom: 10px; font-size: 14px; - color: black; + color: #606266; + span { + color: red; + margin-right: 4px; + } } - .box_list_item_val { - flex: 1; - font-size: 14px; - color: black; + .list_item_input_val { + width: 100%; + display: flex; + align-items: center; + justify-content: space-between; } } - } - .box_x { - width: 100%; - height: 1px; - background: #ececec; - margin: 20px 0; - } - .box_fa { - font-size: 14px; - color: black; - margin-bottom: 20px; - } - .box_videos { - width: 100%; - display: flex; - flex-wrap: wrap; - align-items: center; - margin-top: 20px; - .box_videos_item { - width: 300px; - padding: 5px; - box-sizing: border-box; - display: flex; - align-items: start; - border: 1px solid #ececec; - margin-right: 20px; - margin-bottom: 20px; - &:last-child { - margin-right: 0 !important; - } - video { - flex-shrink: 0; - width: 100px; - height: 100px; - } - .box_videos_item_info { - flex: 1; - font-size: 14px; - color: black; - margin-left: 5px; - } + .list_item_table { + } } } -- Gitblit v1.9.3