Skip to content

F
founder_vue
Commit 307b56e2 by gao_yingdong
Options

多维查询

parent 3eae9acf
Showing with 341 additions and 157 deletions
src/assets/styles/form.scss
......@@ -33,7 +33,7 @@
}
.titleWrap{
margin-top:15px; margin-bottom: 10px;
.two-title{display: inline-block;color:$base-color;width:127px;text-align: right;font-weight:600;font-size: 16px;vertical-align: middle;}
.two-title{display: inline-block;color:$base-color;width:135px;text-align: right;font-weight:600;font-size: 16px;vertical-align: middle;}
.border{display:inline-block;width: 6px;height: 20px;background: $border-bg;vertical-align: middle;margin-left: 10px;}
.dashedBorder{display: inline-block;width: calc(100% - 167px);margin-left: 9px;position: relative;top: -2px;opacity:0.3;border-bottom: 1px dashed $base-color;}
}
......
src/components/formItem_components.vue
......@@ -2,8 +2,74 @@
<div class="paneDiv">
<div>
<div class="titleWrap">
<span class="two-title">{{ field.title }}</span
><span class="dashedBorder"></span>
<span v-if="field.title == '案件信息'" class="two-title">
<span
style="
margin-left: 34px;
display: inline-block;
width: 5px;
height: 15px;
vertical-align: middle;
margin-right: 10px;
background-color: #055fe7;
"
>
</span>
<span style="vertical-align: middle">{{ field.title }}</span>
</span>
<span v-if="field.title == '嫌疑人信息'" class="two-title">
<span
style="
margin-left: 34px;
display: inline-block;
width: 5px;
height: 15px;
vertical-align: middle;
margin-right: 10px;
background-color: #ff4242;
"
>
</span>
<span style="vertical-align: middle; color: #ff4242">{{
field.title
}}</span>
</span>
<span v-if="field.title == '受害人信息'" class="two-title">
<span
style="
margin-left: 34px;
display: inline-block;
width: 5px;
height: 15px;
vertical-align: middle;
margin-right: 10px;
background-color: #ff6f00;
"
>
</span>
<span style="vertical-align: middle; color: #ff6f00">{{
field.title
}}</span>
</span>
<span v-if="field.title == '分类信息'" class="two-title">
<span
style="
margin-left: 34px;
display: inline-block;
width: 5px;
height: 15px;
vertical-align: middle;
margin-right: 10px;
background-color: #00b48f;
"
>
</span>
<span style="vertical-align: middle; color: #00b48f">{{
field.title
}}</span>
</span>
<span class="dashedBorder"></span>
</div>
<div class="zdyLine" v-if="field.id != 'flxx'">
<el-form-item
......@@ -22,8 +88,6 @@
@input="getSeleted(item2, formD[item2.id])"
@clear="getSeleted(item2, formD[item2.id])"
v-if="item2.type == 'text'"
show-word-limit
:maxlength="item2.maxlength > 0 ? item2.maxlength : 50"
>
</el-input>
<!--下拉框-->
......@@ -53,8 +117,6 @@
:disabled="item2.isdisabled"
@input="getSeleted(item2, formD[item2.id])"
@clear="getSeleted(item2, formD[item2.id])"
show-word-limit
:maxlength="item2.maxlength > 0 ? item2.maxlength : 50"
>
</el-input>
—
......@@ -65,25 +127,19 @@
:disabled="item2.isdisabled"
@input="getSeleted(item2, formD[item2.id2], true)"
@clear="getSeleted(item2, formD[item2.id])"
show-word-limit
:maxlength="item2.maxlength > 0 ? item2.maxlength : 50"
>
</el-input>
</div>
<!--文本域-->
<el-input
class="zdyInputWS"
type="textarea"
autosize
:rows="4"
:placeholder="item2.placeholder"
v-model="formD[item2.id]"
v-else-if="item2.type == 'textarea'"
:disabled="item2.isdisabled"
@input="getSeleted(item2, formD[item2.id])"
@clear="getSeleted(item2, formD[item2.id])"
show-word-limit
:maxlength="item2.maxlength > 0 ? item2.maxlength : 200"
>
</el-input>
<!--日期框 日期时间-->
......@@ -91,7 +147,7 @@
v-model="formD[item2.id]"
:type="item2.type"
:placeholder="item2.placeholder"
:picker-options="item2.pickerOptions"
:picker-options="pickerOptions"
align="right"
unlink-panels
@blur="getSeleted(item2, formD[item2.id])"
......@@ -111,7 +167,7 @@
v-model="formD[item2.id]"
:type="item2.type"
:placeholder="item2.placeholder"
:picker-options="item2.pickerOptions"
:picker-options="pickerOptions"
align="right"
unlink-panels
range-separator="至"
......@@ -126,36 +182,6 @@
v-else-if="item2.type == 'daterange'"
>
</el-date-picker>
<!--日期框 日期时间范围-->
<div
class="zdyInputW zdyInputCol2"
id="zdtInpuy"
v-else-if="item2.type == 'zdyDate'"
>
<el-date-picker
v-model="formD[item2.id]"
type="date"
align="right"
@blur="getSeleted(item2, formD[item2.id])"
@change="getSeleted(item2, formD[item2.id])"
:picker-options="item2.pickerOptions"
unlink-panels
value-format="yyyyMMdd"
>
</el-date-picker>
<span class="zs"> 至 </span>
<el-date-picker
v-model="formD[item2.id2]"
type="date"
align="right"
@blur="getSeleted(item2, formD[item2.id2])"
@change="getSeleted(item2, formD[item2.id2])"
:picker-options="item2.pickerOptions2"
unlink-panels
value-format="yyyyMMdd"
>
</el-date-picker>
</div>
<!--多选框-->
<div class="zdyInputW" v-else-if="item2.type == 'checkbox'">
<el-checkbox-group v-model="formD[item2.id]" size="small">
......@@ -163,8 +189,8 @@
v-for="item3 in item2.checkboxData"
:label="item3"
:key="item3"
>{{ item3 }}</el-checkbox
>
>{{ item3 }}
</el-checkbox>
</el-checkbox-group>
</div>
<!--单选框-->
......@@ -175,10 +201,21 @@
v-for="item3 in item2.radioData"
:key="item3.value"
@change="getRadioValue($event, item3.name, item2)"
>{{ item3.name }}</el-radio
>
>{{ item3.name }}
</el-radio>
</el-radio-group>
</div>
<!-- 多选 -->
<div class="zdyInputW" v-else-if="item2.type == 'checkboxs'">
<el-checkbox-group v-model="formD[item2.id]" size="small">
<el-checkbox
v-for="city in item2.checkList"
:label="city"
:key="city.val"
>{{ city.label }}
</el-checkbox>
</el-checkbox-group>
</div>
<!--字典框-->
<div
class="zdyInputW"
......@@ -204,19 +241,24 @@
:currentItem="item2"
:multiple="item2.multiple"
@getDialogSeleted="getCodeSeleted($event, item2)"
@filterData="filterData($event, item2)"
/>
</div>
<!--字典弹框 @emitValue="getLbValue"-->
<div class="zdyInputW" v-else-if="item2.type == 'codeTreeDialogSZ'">
<div class="zdyInputW" v-else-if="item2.type == 'codeTreeDialogLd'">
<select-tree-dialog
:placeholder="'请选择' + item2.name"
:sendId="item2.id"
:formData="formD"
:currentItem="item2"
:multiple="item2.multiple"
/>
</div>
<div class="zdyInputW" v-else-if="item2.type == 'lazyCodeTreeDialog'">
<lazy-select-tree-dialog
:codeType="item2.codeTree"
:placeholder="'请选择' + item2.name"
:sendId="item2.id"
:formData="formD"
:currentItem="item2"
@getDialogSeleted="getCodeSeleted($event, item2)"
@filterData="filterData($event, item2)"
/>
</div>
<!--标识号tag-->
......@@ -231,12 +273,10 @@
{{ tag.kybsh }}
</el-tag>
<el-button class="button-new-tag" size="small" @click="showInput"
>+</el-button
>
>+
</el-button>
</div>
</el-form-item>
<!---->
</div>
<div class="zdyLine checkboxGroup" v-if="field.id == 'flxx'">
<el-checkbox-group
......@@ -271,8 +311,8 @@
v-for="item2 in LabelList"
:key="item2.id"
@change="getKey($event, item.id, item2)"
>{{ item2.label }}</el-radio
>
>{{ item2.label }}
</el-radio>
</el-radio-group>
</li>
</ul>
......@@ -293,8 +333,8 @@
v-for="item2 in LabelList"
:key="item2.id"
@change="getKey($event, item.id, item2)"
>{{ item2.label }}</el-radio
>
>{{ item2.label }}
</el-radio>
</el-radio-group>
</li>
</ul>
......@@ -315,8 +355,8 @@
v-for="item2 in LabelList"
:key="item2.id"
@change="getKey($event, item.id, item2)"
>{{ item2.label }}</el-radio
>
>{{ item2.label }}
</el-radio>
</el-radio-group>
</li>
</ul>
......@@ -337,8 +377,8 @@
v-for="item2 in LabelList"
:key="item2.id"
@change="getKey($event, item.id, item2)"
>{{ item2.label }}</el-radio
>
>{{ item2.label }}
</el-radio>
</el-radio-group>
</li>
</ul>
......@@ -359,8 +399,8 @@
v-for="item2 in LabelList"
:key="item2.id"
@change="getKey($event, item.id, item2)"
>{{ item2.label }}</el-radio
>
>{{ item2.label }}
</el-radio>
</el-radio-group>
</li>
</ul>
......@@ -392,14 +432,15 @@
<script>
import SelectTree from "@c/tree_components.vue";
import SelectTreeDialog from "@c/treeCode_components.vue";
import request from "@/api/interface/dictionaryCode.js";
import LazySelectTreeDialog from "@c/lazy_treeCode_components.vue";
import axios from "axios";
export default {
name: "formItem",
components: {
SelectTree,
SelectTreeDialog,
LazySelectTreeDialog,
},
props: {
formField: Object,
......@@ -426,6 +467,106 @@ export default {
radioGjfl: "",
radioHjdfl: "",
radioMzfl: "",
pickerOptions: {
shortcuts: [
{
text: '最近一个月',
onClick(picker) {
const end = new Date()
const start = new Date()
let year = start.getFullYear()
let month = start.getMonth()
if (month === 0) {
month = 12
year = year - 1
}
if (month < 0) {
month = 12 + month
year = year - 1
}
if (month < 10 && month > 0) {
month = '0' + month
}
let firstDayOfPreMonth =
year + '-' + month + '-' + start.getDate()
firstDayOfPreMonth = new Date(firstDayOfPreMonth)
picker.$emit('pick', [firstDayOfPreMonth, end])
}
},
{
text: '最近三个月',
onClick(picker) {
const end = new Date()
const start = new Date()
let year = start.getFullYear()
let month = start.getMonth() - 2
if (month === 0) {
month = 12
year = year - 1
}
if (month < 0) {
month = 12 + month
year = year - 1
}
if (month < 10 && month > 0) {
month = '0' + month
}
let firstDayOfPreMonth =
year + '-' + month + '-' + start.getDate()
firstDayOfPreMonth = new Date(firstDayOfPreMonth)
picker.$emit('pick', [firstDayOfPreMonth, end])
}
},
{
text: '最近六个月',
onClick(picker) {
const end = new Date()
const start = new Date()
let year = start.getFullYear()
let month = start.getMonth() - 5
if (month === 0) {
month = 12
year = year - 1
}
if (month < 0) {
month = 12 + month
year = year - 1
}
if (month < 10 && month > 0) {
month = '0' + month
}
let firstDayOfPreMonth =
year + '-' + month + '-' + start.getDate()
firstDayOfPreMonth = new Date(firstDayOfPreMonth)
picker.$emit('pick', [firstDayOfPreMonth, end])
}
},
{
text: '最近一年',
onClick(picker) {
const end = new Date()
const start = new Date()
let year = start.getFullYear()
let month = start.getMonth() - 11
if (month === 0) {
month = 12
year = year - 1
}
if (month < 0) {
month = 12 + month
year = year - 1
}
if (month < 10 && month > 0) {
month = '0' + month
}
let firstDayOfPreMonth =
year + '-' + month + '-' + start.getDate()
firstDayOfPreMonth = new Date(firstDayOfPreMonth)
picker.$emit('pick', [firstDayOfPreMonth, end])
}
}
]
}
};
},
watch: {
......@@ -448,6 +589,96 @@ export default {
}
}
},
// "formD.ajlbdm": {
// handler(newName, oldName) {
// if (newName != oldName && newName) {
// axios.get(`JsonData/CODE_AJXZ.json`).then((response) => {
// if (response.success === true) {
// let records = response.data.rows;
// for (let j = 0; j < this.field.data.length; j++) {
// if (this.field.data[j].id == "zatzJyqk") {
// this.field.data[j].codeOptions = [];
// for (let i = 0; i < records.length; i++) {
// if (records[i].id.indexOf(newName) == 0) {
// this.field.data[j].codeOptions.push(records[i]);
// }
// }
// break;
// }
// }
// }
// });
// } else {
// this.$set(this.formD, "zatzJyqk", "");
// this.$set(this.formD, "ajxlb", "");
// axios.get(`JsonData/CODE_AJXZ.json`).then((response) => {
// if (response.success === true) {
// let records = response.data.rows;
// this.field.data.forEach((item) => {
// if (item.id == "zatzJyqk") {
// this.$set(item, "codeOptions", records);
// }
// });
// }
// });
// axios.get(`JsonData/CODE_AJXLB.json`).then((response) => {
// if (response.success === true) {
// let records = response.data.rows;
// this.field.data.forEach((item) => {
// if (item.id == "ajxlb") {
// this.$set(item, "codeOptions", records);
// }
// });
// }
// });
// }
// },
// },
// "formD.zatzJyqk": {
// handler(newName, oldName) {
// if (newName != oldName && newName) {
// debugger;
// this.$set(this.formD, "ajlbdm", newName.substring(0, 8));
// axios.get(`JsonData/CODE_AJXLB.json`).then((response) => {
// if (response.success === true) {
// let records = response.data.rows;
// for (let j = 0; j < this.field.data.length; j++) {
// if (this.field.data[j].id == "ajxlb") {
// this.field.data[j].codeOptions = [];
// for (let i = 0; i < records.length; i++) {
// if (records[i].id.indexOf(newName) == 0) {
// this.field.data[j].codeOptions.push(records[i]);
// }
// }
// break;
// }
// }
// }
// });
// } else {
// debugger;
// this.$set(this.formD, "ajxlb", "");
// axios.get(`JsonData/CODE_AJXLB.json`).then((response) => {
// if (response.success === true) {
// let records = response.data.rows;
// this.field.data.forEach((item) => {
// if (item.id == "ajxlb") {
// this.$set(item, "codeOptions", records);
// }
// });
// }
// });
// }
// },
// },
// "formD.ajxlb": {
// handler(newName, oldName) {
// if (newName != oldName && newName) {
// this.$set(this.formD, "zatzJyqk", newName.substring(0, 12));
// }
// },
// },
formD: {
handler(newVal) {
if (newVal.flxx.indexOf("nldfl") == -1) {
......@@ -488,41 +719,6 @@ export default {
},
},
methods: {
filterData(val, item) {
let self = this;
if (item.id == "ajlbdm") {
//选择主案类别时
self.field.data.forEach((vals) => {
if (vals.id == "zatzJyqk") {
self.formD.zatzJyqk = "";
request.axiosJlCode(vals.codeTree, val).then((response) => {
if (response.success === true) {
vals.codeOptions = response.data.list;
}
});
} else if (vals.id == "ajxlb") {
self.formD.ajxlb = "";
request.axiosJlCode(vals.codeTree, val).then((response) => {
if (response.success === true) {
vals.codeOptions = response.data.list;
}
});
}
});
} else if (item.id == "zatzJyqk") {
//选择主案类别时
self.field.data.forEach((vals) => {
if (vals.id == "ajxlb") {
self.formD.ajxlb = "";
request.axiosJlCode(vals.codeTree, val).then((response) => {
if (response.success === true) {
vals.codeOptions = response.data.list;
}
});
}
});
}
},
clearZdyAll(val) {
let self = this;
self.field.data.forEach((item) => {
......@@ -794,16 +990,16 @@ export default {
self.field.data.forEach((val) => {
if (val.id == "ajxzlb") {
self.formD.ajxzlb = "";
request.axiosJlCode(val.codeTree, startId).then((response) => {
axios.get(`JsonData/${val.codeTree}.json`).then((response) => {
if (response.success === true) {
val.codeOptions = response.data.list;
val.codeOptions = response.data.rows;
}
});
} else if (val.id == "xalbdmbcms") {
self.formD.xalbdmbcms = "";
request.axiosJlCode(val.codeTree, startId).then((response) => {
axios.get(`JsonData/${val.codeTree}.json`).then((response) => {
if (response.success === true) {
val.codeOptions = response.data.list;
val.codeOptions = response.data.rows;
}
});
}
......@@ -815,16 +1011,16 @@ export default {
self.field.data.forEach((val) => {
if (val.id == "ajxzlb") {
self.formD.ajxzlb = "";
request.axiosCode(val.codeTree).then((response) => {
axios.get(val.codeTree).then((response) => {
if (response.success === true) {
self.$set(val, "codeOptions", response.data.list);
self.$set(val, "codeOptions", response.data.rows);
}
});
} else if (val.id == "xalbdmbcms") {
self.formD.xalbdmbcms = "";
request.axiosCode(val.codeTree).then((response) => {
axios.get(val.codeTree).then((response) => {
if (response.success === true) {
self.$set(val, "codeOptions", response.data.list);
self.$set(val, "codeOptions", response.data.rows);
}
});
}
......@@ -835,16 +1031,16 @@ export default {
let startId = self.formD.ajzlb;
if (val.id == "xalbdmbcms") {
self.formD.xalbdmbcms = "";
request.axiosJlCode(val.codeTree, startId).then((response) => {
axios.get(`JsonData/${val.codeTree}.json`).then((response) => {
if (response.success === true) {
val.codeOptions = response.data.list;
val.codeOptions = response.data.rows;
}
});
} else if (val.id == "ajxzlb") {
self.formD.ajxzlb = "";
request.axiosJlCode(val.codeTree, startId).then((response) => {
axios.get(`JsonData/${val.codeTree}.json`).then((response) => {
if (response.success === true) {
val.codeOptions = response.data.list;
val.codeOptions = response.data.rows;
}
});
}
......@@ -861,9 +1057,9 @@ export default {
self.field.data.forEach((val) => {
if (val.id == "xalbdmbcms") {
self.$set(val, "value", "");
request.axiosJlCode(val.codeTree, startId).then((response) => {
axios.get(`JsonData/${val.codeTree}.json`).then((response) => {
if (response.success === true) {
val.codeOptions = response.data.list;
val.codeOptions = response.data.rows;
}
});
}
......@@ -886,16 +1082,16 @@ export default {
self.field.data.forEach((val) => {
if (val.id == "ajxzlb") {
self.formD.ajxzlb = "";
request.axiosJlCode(val.codeTree, startId).then((response) => {
axios.get(`JsonData/${val.codeTree}.json`).then((response) => {
if (response.success === true) {
val.codeOptions = response.data.list;
val.codeOptions = response.data.rows;
}
});
} else if (val.id == "xalbdmbcms") {
self.formD.xalbdmbcms = "";
request.axiosJlCode(val.codeTree, startId).then((response) => {
axios.get(`JsonData/${val.codeTree}.json`).then((response) => {
if (response.success === true) {
val.codeOptions = response.data.list;
val.codeOptions = response.data.rows;
}
});
}
......@@ -903,6 +1099,7 @@ export default {
}
},
getCodeSeleted(codeValue, item) {
debugger;
this.getSeleted(item, codeValue);
},
getRadioValue(val, name, item) {
......@@ -923,16 +1120,6 @@ export default {
let ret2 = self.emitSeleted.find((v) => {
return v.id == item.id;
});
value = value
.replace(
/[`～*~!@#$%^&*()_\-+=<>?:"{}|,./;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、]/g,
""
)
.replace(/\s/g, "");
self.$set(self.formD, item.id, value);
if (item.id2) {
self.$set(self.formD, item.id2, value);
}
if (value != "" && value != null) {
if (!flag) {
if (item.id == "flxx") {
......@@ -996,14 +1183,21 @@ export default {
},
mounted() {
let self = this;
// self.$set(self.formD, 'asjbh', '12454')
// this.getRadioValue()
// setTimeout(()=>{
// self.getSeleted()
// },1000)
},
};
</script>
<style>
@import url("../assets/styles/iconfont.css");
.checkboxGroup .el-checkbox-button.is-focus .el-checkbox-button__inner {
border: 1px solid #cfcfcf;
}
.checkboxGroup .el-checkbox-button__inner {
border-left: 1px solid #cfcfcf;
margin: 0px 12px 11px 0;
......@@ -1017,19 +1211,23 @@ export default {
border-radius: 4px;
box-shadow: none !important;
}
.checkboxGroup .el-checkbox-button.is-checked .el-checkbox-button__inner {
background-color: transparent;
color: #1a81e1;
background: #fcfcfd;
border: 1.5px solid #1a81e1;
}
.checkboxGroup .el-checkbox-button:first-child .el-checkbox-button__inner,
.checkboxGroup .el-checkbox-button:last-child .el-checkbox-button__inner {
border-radius: 4px;
}
.paneDiv .el-form-item__label {
color: #555555;
}
.paneDiv .el-input__inner {
height: 36px;
line-height: 36px;
......@@ -1037,39 +1235,24 @@ export default {
border: 1px solid #cfcfcf;
padding: 0 12px;
}
.paneDiv .el-select {
width: 100%;
}
.paneDiv .el-form-item__content,
.zdyInputW {
/* height: 40px; */
height: 40px;
}
.paneDiv .el-date-editor--daterange.el-input__inner {
width: 100%;
}
</style>
<style scoped lang="scss">
@import "../assets/styles/form.scss";
.zdyLine {
/deep/.el-form-item {
margin-bottom: -4px !important;
}
}
/deep/textarea.el-textarea__inner {
// height: 100px !important;
width: 96%;
}
#zdtInpuy {
/deep/.el-input__inner {
height: 36px;
line-height: 36px;
background: #fcfcfd;
border: 1px solid #cfcfcf;
padding: 0 12px 0 30px !important;
}
.zs {
position: relative;
bottom: 15px;
}
.zdyInputCol2 .el-input {
width: calc((100% - 58px) / 2) !important;
}
</style>
src/router/modules/index.js
......@@ -74,6 +74,7 @@ export default [
title: "多维查询",
auth: 5
},
// component: () => import("@/views/jccx/index.vue")
component: () => import("@/views/jccx/index.vue")
},
{
......
src/views/jccx/index.vue
......@@ -5,7 +5,7 @@
<div class="headerContent">
<!-- <img src="@/assets/img/imageTitle.png" alt="/" /> -->
<span class="headerTitle">多维查询</span>
<span
<!-- <span
:style="{
'font-weight': qsShow ? '700' : '500',
'text-shadow': qsShow ? '2px 2px 2px #000000' : '',
......@@ -29,7 +29,7 @@
src="@/assets/img/new.png"
alt=""
/>
</span>
</span> -->
</div>
</div>
<!--<div class="coverText"></div>-->
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment