Skip to content

F
founder_vue
Commit 72c88c64 by 刘玉帅
Options

selectItem

parent 307174ad
Showing with 1079 additions and 234 deletions
src/components/Select.vue 0 → 100644
<!--
* @Description: file content
* @Version: 2.0
* @Autor: LYS
* @Date: 2021-12-21 15:59:08
* @LastEditors: LYS
* @LastEditTime: 2021-12-21 17:41:46
-->
<template>
<div class="searchSelect">
<slot name="sele" :slotData = "'sssss'">
<el-select v-model="selectData">
<div class="searchDiv">
<el-input
placeholder="请输入"
v-model="searchTxt">
</el-input>
</div>
<el-option
v-for="item in searchResult"
:key="item.value"
:label="item.label"
:value="item.value">
<span v-html="listHtml(item)"></span>
</el-option>
</el-select>
</slot>
</div>
</template>
<script>
export default {
data(){
return {
selectData:'',
searchTxt:'',
optionData:[
{
lable: '1',
value: '深圳有限公司'
},
{
lable: '2',
value: '深圳游戏有限公司'
},
{
lable: '3',
value: '东莞公司'
},
{
lable: '4',
value: '东莞有限公司'
},
{
lable: '5',
value: '深圳某某有限公司'
},
{
lable: '6',
value: '深圳中兴有限公司公司'
}
]
}
},
computed:{
searchResult(){
if(this.searchTxt){
return this.optionData.filter(item=>item.value.includes(this.searchTxt))
}else{
return this.optionData;
}
}
},
methods:{
listHtml(item){
return item.value.replace(new RegExp(this.searchTxt,'g'),'<b style="color:red;">'+this.searchTxt+'</b>')
}
}
}
</script>
<style lang="scss">
.searchSelect{
width: 200px;
margin: 300px auto;
}
.el-scrollbar{
display: block !important;
}
</style>
\ No newline at end of file
src/components/treeCode_components.vue 0 → 100644
<template>
<div style="width:100%">
<!--字典框 @emitValue="getLbValue"-->
<el-select :placeholder="curItem.placeholder"
v-model="curFormData[curItem.id]"
:class="curItem.code"
style="width:100%"
collapse-tags
popper-class="zdyCodeDialog"
@clear="clearSeleted"
@remove-tag="removeTag"
:popper-append-to-body="false"
:multiple="curItem.multiple"
:disabled="curItem.disabled"
empty-text="请从弹框中选择数据"
@visible-change="
(val, $event) => showCodeTreeDialog(val, curItem, curFormData,curItem.id)
"
clearable>
<el-option v-for="item2 in codeTreeConfig.fieldItem"
:key="item2.id"
:label="item2.label"
:value="item2.id">
</el-option>
</el-select>
<!--多级或多数据下拉框弹框样式-->
<el-dialog v-if="dialogCodeVisible"
custom-class="treeDialog"
:visible.sync="dialogCodeVisible"
style="z-index: 2020 !important;"
:close-on-click-modal="false"
center>
<div slot="title"
class="header-title"
style="text-align: left;height: 30px;font-size: 16px;font-family: Microsoft YaHei;font-weight: bold;line-height: 30px;opacity: 1;">
<div>{{ codeTreeConfig.title }}</div>
</div>
<el-input placeholder="输入关键字进行过滤"
v-model="filterText"
style="margin-bottom:4px;width:calc(100% - 26px) !important; margin-left: 15px; margin-top: 2px;">
</el-input>
<div style="width: calc(100% - 18px);height:calc(100% - 42px);overflow-y:auto;border-bottom:1px solid #F2F2F2;margin-left: 7px;">
<el-tree :props="defaultProps"
node-key="id"
:filter-node-method="filterNode"
ref="codeTreeDialog"
:default-expanded-keys="[]"
:default-checked-keys="Array.isArray(curFormData[curItem.id])?curFormData[curItem.id]:[...curFormData[curItem.id]]"
@check="codeTreeNodeCheck"
@check-change="handleNodeClick"
:data="codeTreeConfig.props"
:check-on-click-node="true"
check-strictly
show-checkbox
style="height: 288px;">
<span class="custom-tree-node"
slot-scope="{ node, data }">
<span>{{ node.label }}[{{data.id}}]</span>
</span>
</el-tree>
</div>
<div slot="footer"
class="dialog-footer ar"
style="margin-top: 11px;">
<el-button @click="dialogCodeVisible = false;"
style="width:120px;height:36px">取 消</el-button>
<el-button type="primary"
@click="forSureSelectCode"
style="width:120px;height:36px">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
name: "treeCode_components",
props: {
formData: Object,
currentItem: Object,
sendId: String,
},
data() {
return {
curFormData: this.formData,
curItem: this.currentItem,
defaultProps: {
parent: 'parentId', // 父级唯一标识
value: 'id', // 唯一标识
label: 'label', // 标签显示
children: 'children' // 子级
},
id: this.sendId,
filterText: '',
//多级或多数据下拉框弹框样式（数据量太多时使用这种风格 普通字典还用原来的下拉框）
dialogCodeVisible: false,
//树型字典配置
codeTreeConfig: {
//弹框标题
title: "案发地区划",
//值字段
nodeKey: "value",
//字典类型
codeType: "CODE_XZQH",
//绑定的model
realValue: null,
//当前要展示的字段
fieldItem: null,
//codeTree预设
props: []
},
fdId: "",
preID: "",
}
},
computed: {
newValue() {
var self = this;
debugger
console.log(this.curItem);
if (this.curItem.id != 'zcjddm' && this.curItem.codeOptions.length != 0) {
// if (this.curFormData[this.curItem.id] != '') {
if (this.curFormData[this.curItem.id] != this.preID) {
console.log(123)
let value = this.queryTree(this.curItem.codeOptions, this.curFormData[this.curItem.id])
console.log(value)
this.codeTreeConfig.fieldItem = []
this.$set(
this.curFormData,
this.curItem.id,
value[0] == undefined ? '' : this.curFormData[this.curItem.id]
)
if(this.curFormData.ajzt == "") {
this.$set(this.curFormData, 'ajzt', [])
}
// 记录之前的值
this.preID = this.curFormData[this.curItem.id]
if (value && value.length > 1) {
var label = ''
value.forEach((singleValue, valueIndex) => {
self.codeTreeConfig.fieldItem.push({
id: self.curFormData[this.curItem.id][valueIndex],
label: singleValue == undefined ? '' : singleValue
})
label += valueIndex == 0 ? '' + (singleValue == undefined ? '' : singleValue) : ',' + (singleValue == undefined ? '' : singleValue)
})
self.$emit('getDialogSeleted', label)
} else if (value && value.length == 1) {
var label = ''
value.forEach((singleValue, valueIndex) => {
if (Array.isArray(self.curFormData[this.curItem.id])) {
self.codeTreeConfig.fieldItem.push({
id: self.curFormData[this.curItem.id][valueIndex],
label: singleValue == undefined ? '' : singleValue
})
} else {
self.codeTreeConfig.fieldItem.push({
id: self.curFormData[this.curItem.id],
label: singleValue == undefined ? '' : singleValue
})
}
label += valueIndex == 0 ? '' + (singleValue == undefined ? '' : singleValue) : ',' + (singleValue == undefined ? '' : singleValue)
})
self.$emit('getDialogSeleted', label)
}
}
}
/*return this.curFormData[this.curItem.id]*/
},
newArr() {
return JSON.parse(JSON.stringify(this.curItem.codeOptions));
}
},
watch: {
newArr: {
handler(newValue, oldValue) {
debugger
var self = this
if (oldValue.length == 0 && this.curFormData[this.curItem.id] != "") {
let value = this.queryTree(newValue, this.curFormData[this.curItem.id]);
this.codeTreeConfig.fieldItem = [];
this.$set(
this.curFormData,
this.curItem.id,
value[0] == undefined ? '' : this.curFormData[this.curItem.id]
);
if (value && value.length > 1) {
value.forEach((singleValue, valueIndex) => {
self.codeTreeConfig.fieldItem.push({
id: self.curFormData[this.curItem.id][valueIndex],
label: singleValue == undefined ? '' : singleValue
})
})
} else if (value && value.length == 1) {
value.forEach((singleValue, valueIndex) => {
self.codeTreeConfig.fieldItem.push({
id: self.curFormData[this.curItem.id],
label: singleValue == undefined ? '' : singleValue
})
})
}
}
}
},
formData(val) {
this.curFormData = val;
},
filterText(val) {
clearTimeout(this.fdId);
this.fdId = setTimeout(() => {
this.$refs.codeTreeDialog.filter(val);
}, 500);
},
newValue(val) {
if (val != '') {
let value = this.queryTree(this.curItem.codeOptions, val)[0];
this.codeTreeConfig.fieldItem = [];
this.$set(
this.curFormData,
this.curItem.id,
value == undefined ? '' : val
);
this.codeTreeConfig.fieldItem.push({
id: val,
label: value == undefined ? '' : value
})
}
}
/*curFormData(val){
if(val[this.id]!=''){
this.codeTreeConfig.fieldItem=[];
var data=JSON.parse(JSON.stringify(this.curItem.codeOptions));
let value=this.queryTree(data, val[this.id]);
this.codeTreeConfig.fieldItem.push({
id: val[this.id],
label: value
})
}
}*/
},
methods: {
// 搜索树状数据中的 ID
queryTree(tree, id) {
const tmp = []; // 路径数组
const FindPos = (sourceTree, sourceId) => {
if (sourceTree.id == sourceId) {
tmp.push(sourceTree.label);
return;
} else {
if (sourceTree.children && sourceTree.children.length != 0) {
sourceTree.children.forEach(item => {
if (item.id === sourceId) {
// 寻找到指定的元素节点
tmp.push(item.label);
FindPos(tree, sourceTree.id); // 继续寻找上层元素的位置
} else {
// 当前继续寻找别的子项
FindPos(item, sourceId);
}
});
}
}
};
if (Array.isArray(id)) {
id.forEach(singleId => {
tree.forEach(item2 => {
FindPos(item2, singleId);
});
})
} else {
tree.forEach(item2 => {
FindPos(item2, id);
});
}
return tmp.reverse();
},
removeTag(val) {
let self = this, label = "";
self.codeTreeConfig.fieldItem.splice(self.codeTreeConfig.fieldItem.findIndex(item => item.id === val), 1)
if (self.codeTreeConfig.fieldItem.length != 0) {
self.codeTreeConfig.fieldItem.forEach((item, index) => {
label += index == 0 ? '' + item.label : ',' + item.label;
})
} else {
label = "";
}
this.$emit("getDialogSeleted", label);
},
clearSeleted() {
this.$emit("getDialogSeleted", "");
},
//确定选择当前用户
forSureSelectCode() {
var self = this;
var thisCodeOptions = [];
if (self.$refs.codeTreeDialog.getCheckedNodes().length != 0) {
if (self.curItem.multiple) {
self.$set(
self.codeTreeConfig.realFatherValue,
self.codeTreeConfig.realrValueKey,
self.$refs.codeTreeDialog.getCheckedKeys()
);
var selectedNodes = self.$refs.codeTreeDialog.getCheckedNodes();
for (var i = 0; i < selectedNodes.length; i++) {
thisCodeOptions.push({
id: selectedNodes[i].id,
label: selectedNodes[i].label
});
}
} else {
self.$set(
self.codeTreeConfig.realFatherValue,
self.codeTreeConfig.realrValueKey,
self.$refs.codeTreeDialog.getCheckedNodes()[0].id
);
thisCodeOptions.push({
id: self.$refs.codeTreeDialog.getCheckedNodes()[0].id,
label: self.$refs.codeTreeDialog.getCheckedNodes()[0].label
});
}
self.codeTreeConfig.fieldItem = thisCodeOptions;
if (self.codeTreeConfig.fieldItem.type == "codeTag") {
self.changeTags(
self.$refs.codeTreeDialog.getCheckedKeys(),
self.codeTreeConfig.fieldItem
);
}
self.$forceUpdate();
if (self.curItem.multiple) {
let label = '';
thisCodeOptions.forEach((item, index) => {
label += index == 0 ? '' + item.label : ',' + item.label;
})
self.$emit("getDialogSeleted", label);
} else {
self.$emit("getDialogSeleted", thisCodeOptions[0].label);
}
} else {//没有选值得情况
self.$set(
self.codeTreeConfig.realFatherValue,
self.codeTreeConfig.realrValueKey,
""
);
self.$forceUpdate();
self.$emit("getDialogSeleted", "");
}
self.dialogCodeVisible = false;
},
filterNode(value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1 || data.id.indexOf(value) !== -1;
},
handleNodeClick(data, checked) {
var self = this;
if (!self.curItem.multiple) {
if (checked === true) {
self.codeTreeConfig.codeId = data.id;
self.$refs.codeTreeDialog.setCheckedKeys([data.id])
} else {
if (self.codeTreeConfig.codeId === data.id) {
self.$refs.codeTreeDialog.setCheckedKeys([])
}
}
}
},
//树形字典节点点击事件（用来拦截并控制单选）
codeTreeNodeCheck(data, checked, node) {
console.log(data, checked, node)
},
/**
* 展示字典树弹出框
*/
showCodeTreeDialog(value, item, realFormLableAlign, realValueKey) {
var self = this;
if (value) {
self.filterText = "";
self.codeTreeConfig.nodeKey = "value";
self.codeTreeConfig.codeType = item.codeTree;
self.codeTreeConfig.codeId = "";
if (this.curFormData[this.curItem.id] == "") {
self.codeTreeConfig.fieldItem = item;
} else {
if (self.codeTreeConfig.fieldItem == null || self.codeTreeConfig.fieldItem.length == 0 || self.codeTreeConfig.fieldItem == '') {
self.codeTreeConfig.fieldItem = item;
}
}
self.codeTreeConfig.realFatherValue = realFormLableAlign;
self.codeTreeConfig.realrValueKey = realValueKey;
//先设置一个默认空值
self.codeTreeConfig.realValue = realFormLableAlign[realValueKey];
self.codeTreeConfig.title = item.name;
//延迟加载使弹框的z-index值在el-select之上
setTimeout(() => {
self.dialogCodeVisible = true;
}, 10);
self.codeTreeConfig.props = item.codeOptions;
}
},
},
mounted() {
console.log(this.currentItem);
}
}
</script>
<style scoped>
@font-face {
font-family: "iconfont";
src: url("../assets/fonts/iconfont.eot?t=1610626861614"); /* IE9 */
src: url("../assets/fonts/iconfont.eot?t=1610626861614#iefix")
format("embedded-opentype"),
/* IE6-IE8 */ url("../assets/fonts/iconfont.woff?t=1610626861614")
format("woff"),
url("../assets/fonts/iconfont.ttf?t=1610626861614") format("truetype"),
/* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url("../assets/fonts/iconfont.svg?t=1610626861614#iconfont") format("svg"); /* iOS 4.1- */
}
/deep/ .el-icon-arrow-up {
font-family: "iconfont" !important;
font-size: 16px !important;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/deep/ .el-icon-arrow-up:before,
.el-icon-arrow-up:after {
content: "\e608";
}
/deep/ .zdyCodeDialog {
opacity: 0;
}
/deep/ .treeDialog {
width: 680px;
height: 446px;
background: #ffffff;
box-shadow: 0px 8px 8px rgba(0, 0, 0, 0.1);
opacity: 1;
border-radius: 8px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -223px !important;
margin-left: -340px;
z-index: 100;
}
</style>
src/views/sy/index.vue
......@@ -55,7 +55,7 @@
><span :class="{ active: $route.path == '/jqglIndex/sjcj' }">新增警犬</span></el-breadcrumb-item
>
<el-breadcrumb-item :to="{ path: '/jqglIndex/xx2' }"
<!-- <el-breadcrumb-item :to="{ path: '/jqglIndex/xx2' }"
@click="hanndleClickBreadcrumb('two')"
><span :class="{ active: $route.path == '/jqglIndex/xx2' }">选项二</span></el-breadcrumb-item
......@@ -64,7 +64,7 @@
@click="hanndleClickBreadcrumb('three')"
><span :class="{ active: $route.path == '/jqglIndex/xx3' }">选项三 </span></el-breadcrumb-item
>
> -->
</el-breadcrumb>
</span>
</div>
......
src/views/sy/sjcj.vue
......@@ -2,9 +2,9 @@
<div>
<div class="sjcj">
<div class="title">
<nav>警犬信息</nav>
<nav>警犬信息采集</nav>
</div>
<div class="dogpic">
<!-- <div class="dogpic">
<div class="pic">
<div><span style="color: red">* </span><span>正面照</span></div>
<el-upload
......@@ -60,7 +60,7 @@
</div>
</el-upload>
</div>
</div>
</div> -->
<div class="form">
<el-form
abel-position="right"
......@@ -72,16 +72,11 @@
label-position="top"
:rules="rules"
>
<el-form-item label="警犬犬名" class="col" prop="dogName">
<el-input
v-model="form.dogName"
placeholder="请输入警犬犬名"
></el-input>
</el-form-item>
<div class="item" style="padding-left: 32px; padding-right: 32px">
<el-form-item
label="警犬芯片号"
class="col"
style="margin: 0 80px 0 80px"
style=""
prop="chipCode"
>
<el-input
......@@ -89,15 +84,21 @@
placeholder="请输入警犬芯片号"
></el-input>
</el-form-item>
<el-form-item label="警犬毛色" class="col" prop="policeDogCoatColor">
<el-form-item label="警犬犬名" class="col" prop="name">
<el-input
v-model="form.name"
placeholder="请输入警犬犬名"
></el-input>
</el-form-item>
<el-form-item label="警犬性别" class="col" prop="gender" style="">
<el-select
v-model="form.policeDogCoatColor"
placeholder="请选择警犬毛色"
v-model="form.gender"
placeholder="请选择警犬性别"
clearable
@visible-change="hangleChange('CODE_FURCOLOR')"
@visible-change="hangleChange('CODE_DOG_GENDER')"
>
<el-option
v-for="item in jqms"
v-for="item in jqxb"
:key="item.label"
:label="item.label"
:value="item.id"
......@@ -108,11 +109,11 @@
<el-form-item
label="出生日期："
class="col"
style="margin-left: 80px"
prop="dateOfBirth"
style=""
prop="birthDate"
>
<el-date-picker
v-model="form.dateOfBirth"
v-model="form.birthDate"
type="date"
placeholder="选择日期"
value-format="yyyy-MM-dd"
......@@ -120,41 +121,58 @@
>
</el-date-picker>
</el-form-item>
<el-form-item label="警犬性别" class="col" prop="dogSex">
<el-select
v-model="form.dogSex"
placeholder="请选择警犬性别"
<el-form-item label="警犬片区" class="col" prop="dogAreaId">
<el-select v-model="form.dogAreaId" clearable>
<div class="searchDiv">
<el-input placeholder="请输入" v-model="selectJqpq" >
</el-input>
</div>
<el-option
v-for="item in searchResultJqpq"
:key="item.value"
:label="item.label"
:value="item.id"
>
<span v-html="listHtmlJqpq(item)"></span>
</el-option>
</el-select>
<!-- <el-select
v-model="form.dogAreaId"
placeholder="请选择"
clearable
@visible-change="hangleChange('CODE_DOG_GENDER')"
@visible-change="hangleChange('CODE_DOGSOURCE')"
>
<el-option
v-for="item in jqxb"
v-for="item in jqpq"
:key="item.label"
:label="item.label"
:value="item.id"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item
label="近交系数"
class="col"
style="margin: 0 80px 0 80px"
prop="inbreedingCoefficient"
>
<el-input
v-model="form.inbreedingCoefficient"
placeholder="请输入近交系数"
></el-input>
</el-select> -->
</el-form-item>
<el-form-item
label="警犬出生来源"
class="col"
prop="originOfPoliceDog"
prop="dogSourceId"
style=""
>
<el-select
v-model="form.originOfPoliceDog"
<el-select v-model="form.dogSourceId" clearable>
<div class="searchDiv">
<el-input placeholder="请输入" v-model="selectCsly" >
</el-input>
</div>
<el-option
v-for="item in searchResultCsly"
:key="item.value"
:label="item.label"
:value="item.id"
>
<span v-html="listHtmlCsly(item)"></span>
</el-option>
</el-select>
<!-- <el-select
v-model="form.dogSourceId"
placeholder="请选择警犬出生来源"
clearable
@visible-change="hangleChange('CODE_DEPARTMENT')"
......@@ -166,135 +184,197 @@
:value="item.id"
>
</el-option>
</el-select>
</el-select> -->
</el-form-item>
<el-form-item
label="警犬类别"
class="col"
style="margin-left: 80px"
prop="policeDogCategory"
>
<el-select
v-model="form.policeDogCategory"
placeholder="请选择"
clearable
@visible-change="hangleChange('CODE_WORKINGDOGCLASSIFICA')"
>
<!-- <div>{{jqqz.data.rows}}</div> -->
<!-- <select-item searchTxtValue='form.speciesId' :optionDataList='jqqz.data.rows' label='警用犬种' prop="speciesId">
</select-item> -->
<el-form-item label="警用犬种" class="col" prop="speciesId">
<el-select v-model="form.speciesId">
<div class="searchDiv">
<el-input placeholder="请输入" v-model="searchTxt" >
</el-input>
</div>
<el-option
v-for="item in jqlb"
:key="item.id"
v-for="item in searchResult"
:key="item.value"
:label="item.label"
:value="item.id"
>
<span v-html="listHtml(item)"></span>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="警用犬种" class="col" prop="policeDogBreed">
<el-select
v-model="form.policeDogBreed"
<!-- <el-select
v-model="form.speciesId"
placeholder="请选择警用犬种"
clearable
@visible-change="hangleChange('CODE_SPECIES')"
>
<el-option
v-for="item in jqqz"
v-for="item in jqqz.data.rows"
:key="item.label"
:label="item.label"
:value="item.id"
>
</el-option>
</el-select> -->
</el-form-item>
<el-form-item label="警犬类别" class="col" prop="dogTypeId">
<el-select v-model="form.dogTypeId" clearable>
<div class="searchDiv">
<el-input placeholder="请输入" v-model="selectJqlb" >
</el-input>
</div>
<el-option
v-for="item in searchResultJqlb"
:key="item.value"
:label="item.label"
:value="item.id"
>
<span v-html="listHtmlJqlb(item)"></span>
</el-option>
</el-select>
<!-- <el-select
v-model="form.dogTypeId"
placeholder="请选择"
clearable
@visible-change="hangleChange('CODE_WORKINGDOGCLASSIFICA')"
>
<el-option
v-for="item in jqlb"
:key="item.id"
:label="item.label"
:value="item.id"
>
</el-option>
</el-select> -->
</el-form-item>
<el-form-item label="培训单位" class="col" prop="trainingUnit">
<el-input
v-model="form.trainingUnit"
placeholder="请输入培训单位"
></el-input>
</el-form-item>
<el-form-item
label="健康状态"
label="受训等级"
class="col"
style="margin: 0 80px 0 80px"
prop="healthStatus"
style=""
prop="trainingLevelId"
>
<el-input
v-model="form.healthStatus"
placeholder="请输入健康状态"
v-model="form.trainingLevelId"
placeholder="请输入受训等级"
></el-input>
</el-form-item>
<el-form-item label="使用类别" class="col" prop="useCategory">
<el-select
<el-select v-model="form.useCategory" clearable>
<div class="searchDiv">
<el-input placeholder="请输入" v-model="selectSylb" >
</el-input>
</div>
<el-option
v-for="item in searchResultSylb"
:key="item.value"
:label="item.label"
:value="item.id"
>
<span v-html="listHtmlSylb(item)"></span>
</el-option>
</el-select>
<!-- <el-select
v-model="form.useCategory"
placeholder="使用类别"
clearable
@visible-change="hangleChange('CODE_BASEDATA')"
>
<el-option
v-for="item in sylb"
v-for="item in jqqz.data.rows"
:key="item.label"
:label="item.label"
:value="item.id"
>
</el-option>
</el-select>
</el-select> -->
</el-form-item>
<el-form-item
label="受训等级"
label="健康状态"
class="col"
style="margin-left: 80px"
prop="trainingLevel"
style=""
prop="healthStatus"
>
<el-input
v-model="form.trainingLevel"
placeholder="请输入受训等级"
></el-input>
</el-form-item>
<el-form-item label="培训单位" class="col" prop="trainingUnit">
<el-input
v-model="form.trainingUnit"
placeholder="请输入培训单位"
v-model="form.healthStatus"
placeholder="请输入健康状态"
></el-input>
</el-form-item>
<el-form-item
label="是否为进口"
class="col"
style="margin: 0 80px 0 80px"
prop="isItImported"
<el-form-item label="警犬毛色" class="col" prop="furColorId">
<el-select v-model="form.furColorId" clearable @visible-change="handleChangeSelect">
<div class="searchDiv">
<el-input placeholder="请输入" v-model="selectJqms" >
</el-input>
</div>
<el-option
v-for="item in searchResultJqms"
:key="item.value"
:label="item.label"
:value="item.id"
>
<el-input
v-model="form.isItImported"
placeholder="请输入"
></el-input>
<span v-html="listHtmlJqms(item)"></span>
</el-option>
</el-select>
<!-- <el-select
v-model="form.furColorId"
placeholder="请选择警犬毛色"
clearable
@visible-change="hangleChange('CODE_FURCOLOR')"
>
<el-option
v-for="item in jqms"
:key="item.label"
:label="item.label"
:value="item.id"
>
</el-option>
</el-select> -->
</el-form-item>
<el-form-item label="复训日期：" class="col" prop="retrainingTime">
<el-form-item label="复训日期：" class="col" prop="retrainingDate">
<el-date-picker
v-model="form.retrainingTime"
type="datetime"
v-model="form.retrainingDate"
type="date"
placeholder="选择日期"
value-format="yyyy-MM-dd HH:mm:ss"
value-format="yyyy-MM-dd"
style="width: 100%"
>
</el-date-picker>
</el-form-item>
<br />
<el-form-item
label="外貌特征："
class="colarea"
prop="appearanceCharacteristics"
label="近交系数"
class="col"
prop="inbreedingCoefficient"
>
<el-input
type="textarea"
placeholder="请输入外貌特征描述"
v-model="form.appearanceCharacteristics"
:autosize="{ minRows: 3, maxRows: 4 }"
v-model="form.inbreedingCoefficient"
placeholder="请输入近交系数"
></el-input>
</el-form-item>
<br />
<el-form-item label="警犬片区" class="col" prop="policeDogArea">
<el-form-item
label="是否为进口"
class="col"
style=""
prop="isItImported"
>
<!-- <el-input
v-model="form.isItImported"
placeholder="请输入"
></el-input> -->
<el-select
v-model="form.policeDogArea"
placeholder="请选择"
v-model="form.isItImported"
placeholder="请选择是否为进口"
clearable
@visible-change="hangleChange('CODE_DOGSOURCE')"
@visible-change="hangleChange('CODE_FURCOLOR')"
>
<el-option
v-for="item in jqpq"
v-for="item in isJk"
:key="item.label"
:label="item.label"
:value="item.id"
......@@ -302,37 +382,129 @@
</el-option>
</el-select>
</el-form-item>
<el-form-item
label="信息登记单位"
class="col"
style="margin: 0 80px 0 80px"
prop="informationRegistrationUnit"
>
<el-form-item label="外貌特征：" class="colarea" prop="appearance">
<el-input
v-model="form.informationRegistrationUnit"
placeholder="请输入信息登记单位"
type="textarea"
placeholder="请输入外貌特征描述"
v-model="form.appearance"
:autosize="{ minRows: 3, maxRows: 4 }"
></el-input>
</el-form-item>
<div class="dogpic" style="margin-bottom: 20px">
<div class="pic">
<div><span style="color: red">* </span><span>正面照</span></div>
<el-upload
class="avatar-uploader"
action="#"
:show-file-list="false"
:auto-upload="false"
:on-change="handleChange"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
:http-request="() => {}"
:disabled="isDisable"
>
<div v-if="imageUrl" style="width: 136px; height: 136px">
<img :src="imageUrl" class="avatar" />
<i
class="iconfont icon-shanchu-1 icon"
@click="picClear"
></i>
</div>
<div v-else style="display: flex; flex-direction: column">
<i class="el-icon-plus avatar-uploader-icon"></i>
<i
style="
margin-bottom: 31px;
font-size: 12px;
color: #aeaeb2;
"
>上传照片</i
>
</div>
</el-upload>
<span
v-if="isTS"
style="margin-left: 25px; color: #f56c6c; font-size: 12px"
>*请上传正面照</span
>
</div>
<div class="pic" style="margin-left: 32px">
<div><span>左前侧照</span></div>
<el-upload
class="avatar-uploader"
action="#"
:show-file-list="false"
:auto-upload="false"
:on-change="handleChangeLeft"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
:http-request="() => {}"
:disabled="isDisableLeft"
>
<div v-if="imageUrlLeft">
<img :src="imageUrlLeft" class="avatar" />
<i
class="iconfont icon-shanchu-1 icon"
@click="picClearLeft"
></i>
</div>
<div v-else style="display: flex; flex-direction: column">
<i class="el-icon-plus avatar-uploader-icon"></i>
<i
style="
margin-bottom: 31px;
font-size: 12px;
color: #aeaeb2;
"
>上传照片</i
>
</div>
</el-upload>
</div>
</div>
</div>
<div class="title">
<nav>技术人员信息</nav>
</div>
<div
style="padding-left: 32px; padding-right: 32px; margin-top: 20px"
class="item"
>
<el-form-item label="警犬技术人员编号" class="col" prop="personId">
<el-input
v-model="form.personId"
placeholder="请输入技术人员编号"
></el-input>
</el-form-item>
<el-form-item
label="公安机关机构"
label="警犬技术人员姓名"
class="col"
prop="publicSecurityOrgans"
prop="personName"
>
<el-input
v-model="form.publicSecurityOrgans"
placeholder="请输入公安机关机构"
v-model="form.personName"
placeholder="请输入警犬技术人员姓名"
></el-input>
</el-form-item>
<el-form-item label="公民身份证号码" class="col" prop="idno">
<el-input
v-model="form.idno"
placeholder="请输入公民身份证号码"
></el-input>
</el-form-item>
<el-form-item
label="公安机构名称"
label="信息登记单位"
class="col"
style="margin-left: 80px"
prop="nameOfPublicSecurityOrgan"
style=""
prop="informationRegistrationUnit"
>
<el-input
v-model="form.nameOfPublicSecurityOrgan"
placeholder="输入公安机构名称"
v-model="form.informationRegistrationUnit"
placeholder="请输入信息登记单位"
></el-input>
</el-form-item>
<el-form-item
......@@ -346,47 +518,52 @@
></el-input>
</el-form-item>
<el-form-item
label="登记时间"
label="信息登记人员身份证号"
class="col"
prop="informationRegistrarIdno"
>
<el-input
v-model="form.informationRegistrarIdno"
placeholder="请输入信息登记人员身份证号"
></el-input>
</el-form-item>
<!-- <el-form-item
label="公安机关机构"
class="col"
prop="publicSecurityOrgans"
>
<el-input
v-model="form.publicSecurityOrgans"
placeholder="请输入公安机关机构"
></el-input>
</el-form-item> -->
<el-form-item
label="登记日期"
class="col"
style="margin: 0 80px 0 80px"
style=""
prop="registrationTime"
>
<el-date-picker
v-model="form.registrationTime"
type="datetime"
placeholder="请选择登记时间"
value-format="yyyy-MM-dd HH:mm:ss"
type="date"
placeholder="请选择登记日期 "
value-format="yyyy-MM-dd"
style="width: 100%"
>
</el-date-picker>
</el-form-item>
<el-form-item
label="姓名"
class="col"
style="margin-right: 80px"
prop="name"
>
<el-input v-model="form.name" placeholder="输入姓名"></el-input>
</el-form-item>
<el-form-item label="公民身份号码" class="col" prop="personId">
<el-input
v-model="form.personId"
placeholder="请输入公民身份号码"
></el-input>
</el-form-item>
<br />
<el-form-item
label="技术人员编号"
label="公安机构名称"
class="col"
style="margin-right: 80px"
prop="technicianNo"
style=""
prop="nameOfPublicSecurityOrgan"
>
<el-input
v-model="form.technicianNo"
placeholder="请输入技术人员编号"
v-model="form.nameOfPublicSecurityOrgan"
placeholder="输入公安机构名称"
></el-input>
</el-form-item>
</div>
<!-- <el-form-item label="身份号码" class="col">
<el-input v-model="form.sfzh" placeholder="请输入身份号码"></el-input>
</el-form-item> -->
......@@ -415,10 +592,10 @@
</div>
</div>
<div class="footer">
<el-button
<!-- <el-button
style="background-color: ; color: #1a1a1a; width: 104px; height: 40px"
>次要操作</el-button
>
> -->
<el-button
@click="handleMain('queryForm')"
style="
......@@ -427,7 +604,7 @@
width: 104px;
height: 40px;
"
>主要操作</el-button
>采集完成</el-button
>
</div>
</div>
......@@ -435,20 +612,44 @@
<script>
import { post, postform, get, postJson } from "@/utils/http.js";
import SelectItem from "../../components/Select.vue";
import SelectTreeDialog from "@c/treeCode_components.vue";
import { baseUrl } from "@/api/largeScreen";
import utils from "@/utils/util.js";
export default {
components: {
SelectTreeDialog,
SelectItem,
},
name: "sjcj",
data() {
return {
isJk: [
{
label: "是",
id: "1",
},
{
label: "否",
id: "0",
},
],
searchTxt:'',
selectJqlb:'',
selectCsly:'',
selectSylb:'',
selectJqpq:'',
selectJqms:'',
labelname: "警用犬种",
gender: "gender",
isTS: false,
jqqz: [], //犬种
sylb: [], //使用类别
jqms: [], //警犬毛色
jqxb: [], //性别
csly: [], //出生来源
jqlb: [], //警犬类别
jqpq: [], //片区
jqqz: require("../../../public/JsonData/CODE_SPECIES.json"),
sylb: require("../../../public/JsonData/CODE_BASEDATA.json"),
jqms: require("../../../public/JsonData/CODE_FURCOLOR.json"), //警犬毛色
jqxb: require("../../../public/JsonData/CODE_DOG_GENDER.json"), //性别
csly: require("../../../public/JsonData/CODE_DEPARTMENT.json"), //出生来源
jqlb: require("../../../public/JsonData/CODE_WORKINGDOGCLASSIFICA.json"),
jqpq: require("../../../public/JsonData/CODE_DOGSOURCE.json"), //片区
fileLeft: "",
file: "",
fileList: [],
......@@ -459,29 +660,30 @@ export default {
dialogVisible: false,
form: {
chipCode: "",
technicianNo: "",
dogName: "",
dogSex: "",
dateOfBirth: "",
policeDogBreed: "",
policeDogCoatColor: "",
policeDogCategory: "",
policeDogArea: "",
originOfPoliceDog: "",
personId: "",
name: "",
gender: "",
birthDate: "",
speciesId: "",
furColorId: "",
dogTypeId: "",
dogAreaId: "",
dogSourceId: "",
informationRegistrationUnit: "",
publicSecurityOrgans: "",
nameOfPublicSecurityOrgan: "",
informationRegistrar: "",
name: "",
registrationTime: "",
personName: "",
registrationTime: new Date(),
healthStatus: "",
trainingLevel: "",
trainingLevelId: "",
useCategory: "",
trainingUnit: "",
retrainingTime: "",
appearanceCharacteristics: "",
retrainingDate: "",
appearance: "",
isItImported: "",
personId: "",
idno: "",
informationRegistrarIdno: "",
},
rules: {
chipCode: {
......@@ -489,28 +691,28 @@ export default {
message: "请输入警犬芯片号",
trigger: "blur",
},
technicianNo: {
personId: {
required: true,
message: "请输入技术人员编号",
trigger: "blur",
},
dogName: { required: true, message: "请输入警犬犬名", trigger: "blur" },
dogSex: {
name: { required: true, message: "请输入警犬犬名", trigger: "blur" },
gender: {
required: true,
message: "请选择警犬性别",
trigger: "change",
},
dateOfBirth: {
birthDate: {
required: true,
message: "请选择日期",
trigger: "change",
},
policeDogBreed: {
speciesId: {
required: true,
message: "请选择警用犬种",
trigger: "change",
},
policeDogCoatColor: {
furColorId: {
required: true,
message: "请选择警犬毛色",
trigger: "change",
......@@ -520,17 +722,17 @@ export default {
message: "请输入近交系数：",
trigger: "blur",
},
policeDogCategory: {
dogTypeId: {
required: true,
message: "请选择警犬类别",
trigger: "change",
},
policeDogArea: {
dogAreaId: {
required: true,
message: "请选择警犬片区",
trigger: "change",
},
originOfPoliceDog: {
dogSourceId: {
required: true,
message: "请选择警犬出生来源",
trigger: "change",
......@@ -555,10 +757,15 @@ export default {
message: "请输入信息登记人员",
trigger: "blur",
},
name: { required: true, message: "请输入姓名", trigger: "blur" },
personId: {
informationRegistrarIdno: {
required: true,
message: "请输入信息登记人员身份证号",
trigger: "blur",
},
personName: { required: true, message: "请输入姓名", trigger: "blur" },
idno: {
required: true,
message: "请输入身份 证号",
message: "请输入身份证号",
trigger: "blur",
},
registrationTime: {
......@@ -571,7 +778,7 @@ export default {
message: "请输入健康状态",
trigger: "blur",
},
trainingLevel: {
trainingLevelId: {
required: true,
message: "请输入受训等级",
trigger: "blur",
......@@ -586,12 +793,12 @@ export default {
message: "请输入培训单位",
trigger: "blur",
},
retrainingTime: {
retrainingDate: {
required: true,
message: "请选择复训日期",
trigger: "change",
},
appearanceCharacteristics: {
appearance: {
required: true,
message: "请填写外貌特征",
trigger: "blur",
......@@ -619,6 +826,10 @@ export default {
};
},
methods: {
handleChangeSelect(){
console.log('1111');
this.selectJqms = '';
},
//主要操作
handleMain(formName) {
let self = this;
......@@ -723,6 +934,24 @@ export default {
}
return isJPG && isLt2M;
},
listHtml(item){
return item.label.replace(new RegExp(this.searchTxt,'g'),'<b style="color:red;">'+this.searchTxt+'</b>')
},
listHtmlJqlb(item){
return item.label.replace(new RegExp(this.selectJqlb,'g'),'<b style="color:red;">'+this.selectJqlb+'</b>')
},
listHtmlCsly(item){
return item.label.replace(new RegExp(this.selectCsly,'g'),'<b style="color:red;">'+this.selectCsly+'</b>')
},
listHtmlSylb(item){
return item.label.replace(new RegExp(this.selectSylb,'g'),'<b style="color:red;">'+this.selectSylb+'</b>')
},
listHtmlJqpq(item){
return item.label.replace(new RegExp(this.selectJqpq,'g'),'<b style="color:red;">'+this.selectJqpq+'</b>')
},
listHtmlJqms(item){
return item.label.replace(new RegExp(this.selectJqms,'g'),'<b style="color:red;">'+this.selectJqms+'</b>')
},
},
watch: {
imageUrl(val) {
......@@ -738,43 +967,98 @@ export default {
}
},
},
mounted() {
get(`JsonData/CODE_BASEDATA.json`).then((res) => {
console.log(res.data);
this.sylb = res.data.rows;
// console.log(this.jqlb);
});
get(`JsonData/CODE_FURCOLOR.json`).then((res) => {
console.log(res.data);
this.jqms = res.data.rows;
// console.log(this.jqlb);
});
get(`JsonData/CODE_DOG_GENDER.json`).then((res) => {
console.log(res.data);
this.jqxb = res.data.rows;
// console.log(this.jqlb);
});
get(`JsonData/CODE_DEPARTMENT.json`).then((res) => {
console.log(res.data);
this.csly = res.data.rows;
// console.log(this.jqlb);
});
get(`JsonData/CODE_WORKINGDOGCLASSIFICA.json`).then((res) => {
console.log(res.data);
this.jqlb = res.data.rows;
// console.log(this.jqlb);
});
get(`JsonData/CODE_SPECIES.json`).then((res) => {
console.log(res.data);
this.jqqz = res.data.rows;
// console.log(this.jqlb);
});
get(`JsonData/CODE_DOGSOURCE.json`).then((res) => {
console.log(res.data);
this.jqpq = res.data.rows;
// console.log(this.jqlb);
});
created() {
console.log("父created");
// get(`JsonData/CODE_BASEDATA.json`).then((res) => {
// console.log(res.data);
// this.sylb = res.data.rows;
// // console.log(this.jqlb);
// });
// get(`JsonData/CODE_FURCOLOR.json`).then((res) => {
// console.log(res.data);
// this.jqms = res.data.rows;
// // console.log(this.jqlb);
// });
// get(`JsonData/CODE_DOG_GENDER.json`).then((res) => {
// console.log(res.data);
// // this.jqxb.codeOptions = res.data.rows;
// this.jqxb = res.data.rows;
// // console.log(this.jqlb);
// });
// get(`JsonData/CODE_DEPARTMENT.json`).then((res) => {
// console.log(res.data);
// this.csly = res.data.rows;
// // console.log(this.jqlb);
// });
// get(`JsonData/CODE_WORKINGDOGCLASSIFICA.json`).then((res) => {
// console.log(res.data);
// this.jqlb = res.data.rows;
// // console.log(this.jqlb);
// });
// get(`JsonData/CODE_SPECIES.json`).then((res) => {
// console.log(res.data);
// this.jqqz = res.data.rows;
// console.log(this.jqqz);
// // console.log(this.jqlb);
// });
// get(`JsonData/CODE_DOGSOURCE.json`).then((res) => {
// console.log(res.data);
// this.jqpq = res.data.rows;
// // console.log(this.jqlb);
// });
},
computed:{
searchResult(){
if(this.searchTxt){
return this.jqqz.data.rows.filter(item=>item.label.includes(this.searchTxt))
}else{
return this.jqqz.data.rows;
}
},
searchResultJqlb(){
if(this.selectJqlb){
return this.jqlb.data.rows.filter(item=>item.label.includes(this.selectJqlb))
}else{
return this.jqlb.data.rows;
}
},
searchResultCsly(){
if(this.selectCsly){
return this.csly.data.rows.filter(item=>item.label.includes(this.selectCsly))
}else{
return this.csly.data.rows;
}
},
searchResultSylb(){
if(this.selectSylb){
return this.sylb.data.rows.filter(item=>item.label.includes(this.selectSylb))
}else{
return this.sylb.data.rows;
}
},
searchResultJqpq(){
if(this.selectJqpq){
return this.jqpq.data.rows.filter(item=>item.label.includes(this.selectJqpq))
}else{
return this.jqpq.data.rows;
}
},
searchResultJqms(){
if(this.selectJqms){
return this.jqms.data.rows.filter(item=>item.label.includes(this.selectJqms))
}else{
return this.jqms.data.rows;
}
},
},
mounted() {
var now = new Date();
var year = now.getFullYear(); // 得到年份
var month = now.getMonth(); // 得到月份
var date = now.getDate(); // 得到日期
var defaultDate = `${year}-${month}-${date}`;
this.$set(this.form, "registrationTime", defaultDate);
}
};
</script>
<style>
......@@ -811,8 +1095,7 @@ export default {
background-color: #fff;
border-radius: 8px;
margin: 20px 30px 0 20px;
padding-left: 32px;
padding-right: 32px;
.el-form {
padding: 30px 0;
.col {
......@@ -820,32 +1103,46 @@ export default {
// height: 36px;
}
.colarea {
width: 440px;
width: 100%;
}
}
.form /deep/ {
// padding-left: 32px;
// padding-right: 32px;
.el-form-item__label {
padding: 0;
}
.el-select {
width: 100%;
}
.item {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
}
.searchDiv{
width: 60%;
}
.title {
box-sizing: border-box;
padding-top: 16px;
padding-left: 32px;
// padding-left: 32px;
padding-bottom: 16px;
border-bottom: 1px solid #f0f2f5;
// background: #3f9ee8;
background: linear-gradient(90deg, #3f9ee8 0%, rgba(0, 119, 250, 0) 100%);
border-radius: 5px;
nav {
// width: 64px;
// height: 16px;
font-size: 16px;
font-family: Source Han Sans CN;
font-weight: 500;
font-weight: 900;
line-height: 22px;
color: #363636;
color: #fff;
opacity: 1;
}
}
......
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