From f96e393e62b4c7496f7ace44b6aa5abb69ae58df Mon Sep 17 00:00:00 2001 From: zhanghua <314079846@qq.com> Date: 星期一, 11 九月 2023 21:54:55 +0800 Subject: [PATCH] bug修改 --- src/views/operate/disposal/casepool/pool/createUser/vio/index.vue | 812 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 810 insertions(+), 2 deletions(-) diff --git a/src/views/operate/disposal/casepool/pool/createUser/vio/index.vue b/src/views/operate/disposal/casepool/pool/createUser/vio/index.vue index d0ef7c6..1bc7e34 100644 --- a/src/views/operate/disposal/casepool/pool/createUser/vio/index.vue +++ b/src/views/operate/disposal/casepool/pool/createUser/vio/index.vue @@ -1,3 +1,811 @@ <template> - <div>1</div> -</template> \ No newline at end of file + <div class="vio"> + <div class="input-area"> + <div class="input-header"> + <div class="input-header__title">鍩虹淇℃伅</div> + <div class="input-header__tip">濉啓浜嬩欢鍩虹淇℃伅</div> + </div> + <div class="input-form"> + <el-form + ref="user" + label-width="120px" + autoComplete="on" + :model="vio" + :rules="createRoleRules" + label-position="right" + > + <div class="user-item"> + <!-- 闂绫诲瀷 --> + <el-form-item class="optionItem" label="闂绫诲瀷:" prop="category"> + <el-select v-model="vio.category" placeholder="杩濊" disabled> + <el-option + v-for="item in typeList" + :key="item.label" + :label="item.label" + :value="item.value" + > + </el-option> + </el-select> + </el-form-item> + <!-- 澶х被鍚嶇О --> + <el-form-item + class="optionItems" + label="澶х被鍚嶇О:" + prop="categoryId" + > + <el-select + v-model="vio.categoryId" + placeholder="璇烽�夋嫨澶х被鍚嶇О" + @change="handleBigKindChange" + > + <el-option + v-for="item in bigKindList" + :key="item.id" + :label="item.name" + :value="item.id" + > + </el-option> + </el-select> + </el-form-item> + </div> + <div class="user-item"> + <!-- 灏忕被鍚嶇О --> + <el-form-item class="optionItems" label="灏忕被鍚嶇О:" prop="typeId"> + <el-select + v-model="vio.typeId" + placeholder="璇烽�夋嫨灏忕被鍚嶇О" + @change="handleSmallKindChange" + > + <el-option + v-for="item in smallKindList" + :key="item.id" + :label="item.name" + :value="item.id" + > + </el-option> + </el-select> + </el-form-item> + <!-- 浜嬩欢绛夌骇 --> + <el-form-item class="optionItems" label="浜嬩欢绛夌骇:" prop="gradeId"> + <el-cascader + :show-all-levels="false" + v-model="vio.gradeId" + :props="{ + value: 'id', + label: 'name', + children: 'children', + emitPath: false, + }" + :options="eventLevelList" + ></el-cascader> + </el-form-item> + </div> + <!-- 妗堢敱 --> + <el-form-item + class="optionItem anyou" + label="妗堢敱:" + prop="actionCause" + > + <el-select + v-model="vio.actionCause" + placeholder="璇疯緭鍏ユ鐢�" + filterable + @blur="selectBlur" + > + <el-option + v-for="item in anYouList" + :key="item.id" + :label="item.name" + :value="item.name" + > + </el-option> + </el-select> + </el-form-item> + <div class="user-item"> + <!-- 鎵�灞炶閬� --> + <el-form-item class="optionItems" label="鎵�灞炶閬�:" prop="streetId"> + <el-select + v-model="vio.streetId" + placeholder="璇烽�夋嫨鎵�灞炶閬�" + @change="handleStreet" + > + <el-option + v-for="item in streetList" + :key="item.id" + :label="item.regionName" + :value="item.id" + > + </el-option> + </el-select> + </el-form-item> + <!-- 鎵�灞炵ぞ鍖� --> + <el-form-item + class="optionItems" + label="鎵�灞炵ぞ鍖�:" + prop="communityId" + > + <el-select v-model="vio.communityId" placeholder="璇烽�夋嫨鎵�灞炵ぞ鍖�"> + <el-option + v-for="item in communityList" + :key="item.id" + :label="item.regionName" + :value="item.id" + > + </el-option> + </el-select> + </el-form-item> + </div> + <!-- 浜嬪彂鍦扮偣 --> + <el-form-item class="optionItems" label="浜嬪彂鍦扮偣:" prop="site"> + <el-input + placeholder="璇疯緭鍏ヤ簨鍙戝湴璇︾粏浣嶇疆" + v-model="vio.site" + ></el-input> + </el-form-item> + <div class="user-item"> + <!-- 鏄惁鍏宠仈鍟嗛摵 --> + <el-form-item + class="optionItems" + label="鏄惁鍏宠仈鍟嗛摵:" + prop="linkShop" + > + <el-radio-group v-model="vio.linkShop" @change="handleLinkShop"> + <el-radio :label="1">鏄�</el-radio> + <el-radio :label="0">鍚�</el-radio> + </el-radio-group> + </el-form-item> + <!-- 鍏宠仈鍟嗛摵鍚嶇О --> + <el-form-item + class="optionItems" + label="鍏宠仈鍟嗛摵鍚嶇О:" + prop="shopName" + > + <el-select + v-model="vio.shopName" + :disabled="vio.linkShop === 0" + placeholder="璇峰~鍐欏叧鑱斿晢閾哄悕绉�" + > + <el-option + v-for="store in storeList" + :key="store.id" + :value="store.id" + :label="store.storeName" + ></el-option> + </el-select> + </el-form-item> + </div> + <!-- 濉啓杞︾墝鍙� --> + <el-form-item + class="optionItems" + label="濉啓杞︾墝鍙�:" + prop="carNumber" + > + <el-input + placeholder="璇峰~鍐欒溅鐗屽彿" + v-model="vio.carNumber" + ></el-input> + </el-form-item> + <!-- 闂鎻忚堪 --> + <el-form-item + class="optionItems" + label="闂鎻忚堪:" + prop="description" + > + <el-input + type="textarea" + :rows="5" + maxlength="200" + placeholder="璇疯緭鍏ュ唴瀹�200瀛椾互鍐�" + v-model="vio.description" + > + </el-input> + </el-form-item> + <div class="user-item"> + <!-- 鎶ヨ鏃堕棿 --> + <el-form-item + class="optionItems" + label="鎶ヨ鏃堕棿:" + prop="alarmTime" + > + <el-date-picker + v-model="vio.alarmTime" + type="datetime" + placeholder="閫夋嫨鎶ヨ鏃堕棿" + > + </el-date-picker> + </el-form-item> + <!-- 璋冨害鏃堕檺 --> + <el-form-item + class="optionItems" + label="璋冨害鏃堕檺:" + prop="limitTime" + > + <el-date-picker + v-model="vio.limitTime" + type="datetime" + placeholder="閫夋嫨璋冨害鏃堕檺" + > + </el-date-picker> + </el-form-item> + </div> + <el-form-item prop="url" label="鍥剧墖:" min-width="8"> + <my-upload + :picture-list="imageList" + :is-show-upload="dialogType !== 'view'" + @setPictureUrl="setPictureUrl" + @delPictureUrl="delPictureUrl" + ></my-upload> + </el-form-item> + + <el-form-item prop="url" label="瑙嗛:" min-width="8"> + <my-upload-media + :picture-list="mediaList" + :is-show-upload="dialogType !== 'view'" + @setPictureUrl="setMediaUrl" + @delPictureUrl="delMediaUrl" + ></my-upload-media> + </el-form-item> + <!-- 濉啓鍙嶆槧浜轰俊鎭� --> + <el-form-item class="optionItems" label="濉啓鍙嶆槧浜轰俊鎭�"> + </el-form-item> + <!-- 鍙嶆槧浜烘儏鍐� --> + <div class="user-item"> + <el-form-item class="optionItems" label="鍙嶆槧浜�:" prop="informant"> + <el-input v-model="vio.informant"></el-input> + </el-form-item> + <el-form-item + class="optionItems" + label="鑱旂郴鏂瑰紡:" + prop="informantPhoneCode" + > + <el-input v-model="vio.informantPhoneCode"></el-input> + </el-form-item> + </div> + <el-form-item + class="optionItems" + label="韬唤璇佸彿:" + prop="informantIdCard" + > + <el-input v-model="vio.informantIdCard"></el-input> + </el-form-item> + </el-form> + </div> + <div class="input-footer"> + <el-button type="primary" class="confirm" @click="handleSubmit" + >纭畾</el-button + > + <el-button class="back" @click="handleBack">杩斿洖</el-button> + </div> + </div> + <div class="map-area"> + <!-- <MyMap /> --> + </div> + </div> +</template> +<script> +// import MyMap from "@/components/map"; +import MyMap from "@/components/map/leafletMap.vue"; +import { + validateName, + validatePhone, + validateCarNum, + validateCardId, +} from "@/utils/validate"; +import { getTypeList } from "@/utils/helper"; +import { parseTime } from "@/utils/index"; +import { getStoreInfoList } from "@/api/operate/storeManagement"; +import MyUpload from "@/components/myUpload"; +import MyUploadMedia from "@/components/myUpload/media.vue"; +import { FILE_ORIGINAL_URL } from "@/utils"; +export default { + components: { + MyMap, + MyUpload, + MyUploadMedia, + }, + data() { + const checkCause = (rule, value, callback) => { + if (value) { + callback(); + } else { + callback(new Error("妗堢敱涓嶈兘涓虹┖")); + } + }; + const checkCategory = (rule, value, callback) => { + if (value) { + callback(); + } else { + callback(new Error("澶х被鍚嶇О涓嶈兘涓虹┖")); + } + }; + const checkCommunity = (rule, value, callback) => { + if (value) { + callback(); + } else { + callback(new Error("鎵�灞炵ぞ鍖轰笉鑳戒负绌�")); + } + }; + const checkDesc = (rule, value, callback) => { + if (value) { + callback(); + } else { + callback(new Error("闂鎻忚堪涓嶈兘涓虹┖")); + } + }; + const checkSite = (rule, value, callback) => { + if (value) { + callback(); + } else { + callback(new Error("浜嬪彂鍦扮偣涓嶈兘涓虹┖")); + } + }; + const checkStreet = (rule, value, callback) => { + if (value) { + callback(); + } else { + callback(new Error("鎵�灞炶閬撲笉鑳戒负绌�")); + } + }; + const checkType = (rule, value, callback) => { + if (value) { + callback(); + } else { + callback(new Error("灏忕被涓嶈兘涓虹┖")); + } + }; + const checkGrade = (rule, value, callback) => { + if (value) { + callback(); + } else { + callback(new Error("浜嬩欢绛夌骇涓嶈兘涓虹┖")); + } + }; + const checkDate = (rule, value, callback) => { + if (value) { + callback(); + } else { + callback(new Error("鎶ヨ鏃堕棿涓嶈兘涓虹┖")); + } + }; + const checkName = (rule, value, callback) => { + if (value) { + validateName(value) + ? callback() + : callback(new Error("璇疯緭鍏ユ纭殑濮撳悕")); + } else { + callback(); + } + }; + const checkCardId = (rule, value, callback) => { + if (value) { + validateCardId(value) + ? callback() + : callback(new Error("璇疯緭鍏ユ纭殑韬唤璇佸彿鐮�")); + } else { + callback(); + } + }; + const checkPhone = (rule, value, callback) => { + if (value) { + validatePhone(value) + ? callback() + : callback(new Error("璇疯緭鍏ユ纭殑鎵嬫満鍙�")); + } else { + callback(); + } + }; + const checkLink = (rule, value, callback) => { + if (value) { + callback(); + } else { + if (this.vio.linkShop === 1) { + callback(new Error("鍏宠仈鍟嗛摵鍚嶅瓧涓嶈兘涓虹┖")); + } else { + callback(); + } + } + }; + const checkLimit = (rule, value, callback) => { + if (value) { + callback(); + } else { + callback(new Error("璋冨害鏃堕檺鏃堕棿涓嶈兘涓虹┖")); + } + }; + return { + vio: { + actionCause: "", //妗堢敱 + carNumber: "", //杞︾墝鍙� + categoryId: "", //澶х被 + communityId: "", //鎵�灞炵ぞ鍖� + description: "", //闂鎻忚堪 + informant: "", //鍙嶆槧浜� + informantIdCard: "", //韬唤璇佸彿鐮� + informantPhoneCode: "", //鍙嶆槧浜鸿仈绯绘柟寮� + linkShop: 0, //鏄惁鍏宠仈鍟嗛摵(0鍚�1鏄�) + shopName: "", //鍏宠仈鍟嗛摵鍚嶇О + site: "", //浜嬪彂鍦扮偣 + streetId: "", //鎵�灞炶閬� + typeId: "", //灏忕被 + gradeId: "", //妗堜欢绛夌骇 + alarmTime: "", + limitTime: "", //璋冨害鏃堕檺 + }, + createRoleRules: { + //妗堢敱 + actionCause: [ + { + required: true, + trigger: "blur", + validator: checkCause, + }, + ], + //澶х被 + categoryId: [ + { + required: true, + trigger: "change", + validator: checkCategory, + }, + ], + //鎵�灞炵ぞ鍖� + communityId: [ + { + required: true, + trigger: "change", + validator: checkCommunity, + }, + ], + //闂鎻忚堪 + description: [ + { + required: true, + trigger: "blur", + validator: checkDesc, + }, + ], + informant: [ + { + required: false, + trigger: "blur", + validator: checkName, + }, + ], + informantIdCard: [ + { + required: false, + trigger: "blur", + validator: checkCardId, + }, + ], + informantPhoneCode: [ + { + required: false, + trigger: "blur", + validator: checkPhone, + }, + ], + // linkShop:0,//鏄惁鍏宠仈鍟嗛摵(0鍚�1鏄�) + shopName: [ + { + required: false, + trigger: "blur", + validator: checkLink, + }, + ], + //浜嬪彂鍦扮偣 + site: [ + { + required: true, + trigger: "blur", + validator: checkSite, + }, + ], + //鎵�灞炶閬� + streetId: [ + { + required: true, + trigger: "change", + validator: checkStreet, + }, + ], + //灏忕被 + typeId: [ + { + required: true, + trigger: "change", + validator: checkType, + }, + ], + //妗堜欢绛夌骇 + gradeId: [ + { + required: true, + trigger: "change", + validator: checkGrade, + }, + ], + alarmTime: [ + { + required: true, + trigger: "change", + validator: checkDate, + }, + ], + limitTime: [ + { + required: true, + trigger: "change", + validator: checkLimit, + }, + ], + }, + bigKindList: [], + smallKindList: [], + eventLevelList: [], + typeList: [ + { + label: "杩濊", + value: 1, + }, + { + label: "杩濆缓", + value: 2, + }, + ], + streetList: [], + communityList: [], + anYouList: [], + storeList: [], + imageList: [], + mediaList: [], + dialogType: "add", + }; + }, + created() { + const { setBigKindList, getStreetList, getEventLevel } = this; + this.vio.category = this.mytype + 1; + setBigKindList(); + getStreetList(0); + getEventLevel(); + this.getShopList(); + }, + methods: { + handleStop() { + this.refresh(); + }, + // 璁剧疆澶х被 + async setBigKindList() { + this.bigKindList = await this.getBigKind(); + }, + // 璁剧疆灏忕被 + async setSmallKindList(id) { + let arr = await this.getSmallKind(); + this.smallKindList = arr.filter((item) => { + if (item.parentId === id) { + return item; + } + }); + }, + // 璁剧疆妗堢敱 + async setAnYouList(id) { + let arr = await this.getAnYouList(); + this.anYouList = arr.filter((item) => { + if (item.parentId === id) { + return item; + } + }); + }, + // 鏌ヨ澶х被鍒楄〃 + async getBigKind() { + let arr = []; + await this.$axios({ + method: "get", + url: "sccg/violations/query/type_second", + }).then((res) => { + arr = res.data; + }); + return arr; + }, + // 鑾峰彇灏忕被鍒楄〃 + async getSmallKind() { + let arr = []; + await this.$axios({ + method: "get", + url: "sccg/violations/query/type_third", + }).then((res) => { + arr = res.data; + }); + return arr; + }, + // 鑾峰彇妗堜欢绛夌骇鍒楄〃 + async getEventLevel() { + this.eventLevelList = await getTypeList(1, "02"); + }, + // 鏌ヨ鎵�灞炴鐢� + async getAnYouList() { + let arr = []; + await this.$axios({ + method: "get", + url: "sccg/violations/query/type_four", + }).then((res) => { + arr = res.data; + }); + return arr; + }, + // 鎻愪氦娉ㄥ唽淇℃伅 + handleSubmit() { + this.vio.imageUrls = this.imageList; + this.vio.videoUrls = this.mediaList; + this.$refs.user.validate((valid) => { + if (valid) { + const { vio } = this; + this.$axios({ + method: "post", + url: "sccg/base_case/addition_violation", + data: { + ...vio, + alarmTime: parseTime(vio.alarmTime), + limitTime: parseTime(vio.limitTime), + }, + }).then((res) => { + if (res.code === 200) { + this.$message({ + type: "success", + message: res.message, + }); + this.$emit("changeDialog", { flag: false }); + this.refresh(); + } else { + this.$message({ + type: "warning", + message: res.message, + }); + } + }); + } else { + return false; + } + }); + }, + // 杩斿洖 + handleBack() { + this.$emit("changeDialog", { flag: false }); + }, + // 鑾峰彇琛楅亾淇℃伅 + async getStreetList(id) { + let arr; + await this.$axios({ + method: "get", + url: `sccg/sccg_region/getChildren/${id}`, + }).then((res) => { + if (res.code === 200) { + arr = res.data; + } + }); + this.streetList = arr; + }, + // 琛楅亾鏇存敼 + handleStreet(id) { + this.vio.communityId = ""; + this.$axios({ + method: "get", + url: `sccg/sccg_region/getChildren/${id}`, + }).then((res) => { + this.communityList = res.data; + }); + }, + // 鍏宠仈鍟嗛摵 + handleLinkShop(value) { + value === 0 ? (this.vio.shopName = "") : ""; + }, + // 澶х被閫変腑 + handleBigKindChange(id) { + this.vio.actionCause = ""; + this.vio.typeId = ""; + this.setSmallKindList(id); + }, + // 灏忕被閫変腑 + handleSmallKindChange(id) { + this.vio.actionCause = ""; + this.setAnYouList(id); + }, + // 妗堢敱杈撳叆 + selectBlur(e) { + if (e.target.value) { + this.vio.actionCause = e.target.value; + } + }, + setPictureUrl({ url }) { + this.imageList.push(`${FILE_ORIGINAL_URL}sccg/API/img?fileUrl=${url}`); + // this.imagedata.url = this.imageList.join(","); + }, + delPictureUrl({ url }) { + this.imageList = this.imageList.filter((item) => item !== url); + // this.imagedata.url = this.imageList.join(","); + }, + + setMediaUrl({ url }) { + this.mediaList.push(`${FILE_ORIGINAL_URL}sccg/API/img?fileUrl=${url}`); + this.mediaList.url = this.mediaList.join(","); + }, + delMediaUrl({ url }) { + this.mediaList = this.mediaList.filter((item) => item !== url); + this.mediaList.url = this.mediaList.join(","); + }, + getShopList() { + getStoreInfoList({ current: 1, size: 100 }) + .then(({ list }) => { + this.storeList = list; + }) + .catch((err) => { + this.$message.error(err); + }); + }, + }, + props: ["mytype", "changeDialog", "refresh"], +}; +</script> +<style lang="scss" scoped> +.vio { + display: flex; + padding: 20px 10px 50px; + + .input-area { + flex: 3; + padding: 10px 20px; + + .input-header { + color: #4b9bb7; + + .input-header__title { + line-height: 60px; + font-weight: 650; + font-size: 20px; + } + + .input-header__tip { + line-height: 40px; + } + } + + .user-item { + display: flex; + justify-content: space-between; + } + + .input-form { + .el-form { + // &::v-deep .el-form-item__label { + // color: #4b9bb7; + // } + + // &::v-deep .el-input__inner { + // // background-color: #09152f; + // border: 1px solid #17324c; + // } + + // &::v-deep .el-textarea__inner { + // // background-color: #09152f; + // border: 1px solid #17324c; + // } + } + } + + .input-footer { + display: flex; + justify-content: center; + } + } + + .map-area { + flex: 2; + } + + .anyou { + :deep(.el-select) { + display: block; + } + } +} +</style> -- Gitblit v1.8.0