From 73b48dd59a2d47b365b87784371c4ef57dde659b Mon Sep 17 00:00:00 2001
From: Oliver <1070107765@qq.com>
Date: 星期四, 22 十二月 2022 11:17:47 +0800
Subject: [PATCH] 首页新增
---
src/views/operate/disposal/casepool/pool/createUser/vio/index.vue | 609 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 607 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..46aa84e 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,608 @@
<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-select v-model="vio.gradeId" placeholder="璇烽�夋嫨妗堜欢绛夌骇">
+ <el-option v-for="item in eventLevelList" :key="item.id" :label="item.name"
+ :value="item.id">
+ </el-option>
+ </el-select>
+ </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 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 { validateName, validatePhone, validateCarNum, validateCardId } from '@/utils/validate'
+import { getTypeList } from '@/utils/helper'
+import { parseTime } from "@/utils/index"
+import { getStoreInfoList } from "@/api/operate/storeManagement";
+export default {
+ components: {
+ MyMap
+ },
+ 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: []
+ }
+ },
+ 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.$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;
+ }
+ },
+
+ 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>
\ No newline at end of file
--
Gitblit v1.8.0