Skip to content

F
founder_vue
Commit 5b013725 by 马小涵
Options

自定义列的表头文字展示; 

自定义列的多选checkbox样式展示;
table日期数据的格式化;
按钮标签的逻辑修改;
parent f989f890
Showing with 166 additions and 236 deletions
src/views/cxyrd/QueryConfirm.vue
......@@ -79,24 +79,48 @@
<div class="display_style">
<label>查询类型：</label>
<div v-for="(btn, index) in queryTypeBtns" :key="index">
<div class="btn" @click="getQueryType(btn)">
{{ btn.queryTypeName }}
<div
class="btn"
@click="getQueryType(btn, 'querytypes')"
:class="[
reqParam.contrastCustomSearchReq.querytypes.includes(btn.value)
? 'btn-active'
: ''
]"
>
{{ btn.name }}
</div>
</div>
</div>
<div class="display_style">
<label>优先级：</label>
<div v-for="(btn, index) in queryClassBtns" :key="index">
<div class="btn" @click="getQueryClass(btn)">
{{ btn.queryClassName }}
<div
class="btn"
@click="getQueryType(btn, 'queryclasss')"
:class="[
reqParam.contrastCustomSearchReq.queryclasss.includes(btn.value)
? 'btn-active'
: ''
]"
>
{{ btn.name }}
</div>
</div>
</div>
<div class="display_style">
<label>是否远程：</label>
<div v-for="(btn, index) in remoteFlagBtns" :key="index">
<div class="btn" @click="getRemoteFlag(btn)">
{{ btn.remoteFlagName }}
<div
class="btn"
@click="getQueryType(btn, 'remoteflags')"
:class="[
reqParam.contrastCustomSearchReq.remoteflags.includes(btn.value)
? 'btn-active'
: ''
]"
>
{{ btn.name }}
</div>
</div>
</div>
......@@ -111,8 +135,16 @@
<!-- -1：无效；0：等待比对；1：正在比对；9：比对出错；10：比对完成（等待认定）；11：正在认定；19：认定出错；20：认定完成（等待复核）；21：正在复核；29：复核出错；30；复合完成；99：标记删除-->
<div class="btn" @click="search">全部</div>
<div v-for="(btn, index) in queryStateBtns" :key="index">
<div class="btn" @click="getQueryState(btn)">
{{ btn.queryStateName }}
<div
class="btn"
@click="getQueryType(btn, 'querystates')"
:class="[
reqParam.contrastCustomSearchReq.querystates.includes(btn.value)
? 'btn-active'
: ''
]"
>
{{ btn.name }}
</div>
</div>
</div>
......@@ -129,13 +161,13 @@
</div>
<el-tag
style="margin-right: 10px;"
:key="tag"
v-for="tag in dynamicTags"
:key="index"
v-for="(tag, index) in dynamicTags"
closable
:disable-transitions="false"
@close="handleClose(tag, true)"
@close="handleClose(tag)"
>
{{ tag }}
{{ tag.name }}
</el-tag>
</div>
</div>
......@@ -184,9 +216,9 @@
height="490"
ref="confirmTable"
tooltip-effect="dark"
:data="list"
:data="tableData"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
row-key="queryId"
row-key="id"
@row-click="edit"
@expand-change="hadnlExpandChange"
>
......@@ -199,13 +231,13 @@
<el-table-column prop="" label="任务号" width="150">
<template slot-scope="scope">
<svg-icon
style="width: 14px;height: 10px;margin-bottom: 2px ;"
style="width: 14px;height: 11px;margin-bottom: 2px ;"
v-if="scope.row.children || scope.row.children === null"
icon-class="tree_f"
>
</svg-icon>
<svg-icon
style="width: 13px;height: 6px;margin: 0 0 3px 0 ;border: #e21164 1px solid"
style="width: 13px;height: 6px;margin: 0 0 3px 0 ;"
v-else-if="!scope.row.children || scope.row.children !== null"
icon-class="tree_c"
></svg-icon>
......@@ -220,8 +252,7 @@
v-for="(item, index) in tableProps"
show-overflow-tooltip
:key="index"
:label="item.name"
:formatter="dataFormat"
:label="item.colume"
:prop="item.prop"
:width="item.width"
>
......@@ -265,7 +296,9 @@
: "最高"
}}
</template>
<template v-else> {{ scope.row[item.prop] }}</template>
<template v-else>
{{ dataFormat(scope.row, item.prop) }}</template
>
</template>
</el-table-column>
<el-table-column width="140" label="操作">
......@@ -357,43 +390,52 @@ export default {
// 自定义展示列table数据
key: 1,
tableProps: content,
checkedProps: [],
checkedProps: [
"barcode",
"maxcandidatecnt",
"querytype",
"queryStateName",
"hitpossibility",
"queryclass",
"affirmtime",
"requestdatetime",
"userdesc"
],
defaultTableProps: content,
//标签数组
dynamicTags: [],
queryTypeBtns: [
{ querytype: "0", queryTypeName: "查重", flag: false },
{ querytype: "1", queryTypeName: "倒查", flag: false },
{ querytype: "2", queryTypeName: "正查", flag: false },
{ querytype: "3", queryTypeName: "串案", flag: false }
{ value: "0", name: "查重", type: "querytypes" },
{ value: "1", name: "倒查", type: "querytypes" },
{ value: "2", name: "正查", type: "querytypes" },
{ value: "3", name: "串案", type: "querytypes" }
],
queryClassBtns: [
{ queryclass: "1", queryClassName: "最高", flag: false },
{ queryclass: "2", queryClassName: "高", flag: false },
{ queryclass: "3", queryClassName: "中", flag: false },
{ queryclass: "4", queryClassName: "低", flag: false },
{ queryclass: "5", queryClassName: "最低", flag: false }
{ value: "1", name: "最高", type: "queryclasss" },
{ value: "2", name: "高", type: "queryclasss" },
{ value: "3", name: "中", type: "queryclasss" },
{ value: "4", name: "低", type: "queryclasss" },
{ value: "5", name: "最低", type: "queryclasss" }
],
remoteFlagBtns: [
{ remoteflag: "0", remoteFlagName: "本地查询", flag: false },
{ remoteflag: "0", remoteFlagName: "远程查询", flag: false },
{ remoteflag: "0", remoteFlagName: "城市", flag: false },
{ remoteflag: "0", remoteFlagName: "国家库", flag: false }
{ value: "0", name: "本地查询", type: "remoteflags" },
{ value: "0", name: "远程查询", type: "remoteflags" },
{ value: "0", name: "城市", type: "remoteflags" },
{ value: "0", name: "国家库", type: "remoteflags" }
],
queryStateBtns: [
{ querystate: "0", queryStateName: "等待比对", flag: false },
{ querystate: "1", queryStateName: "正在对比", flag: false },
{ querystate: "10", queryStateName: "比对完成", flag: false },
{ querystate: "11", queryStateName: "正在认定", flag: false },
{ querystate: "20", queryStateName: "认定完成", flag: false },
{ querystate: "21", queryStateName: "正在复核", flag: false },
{ querystate: "30", queryStateName: "复核完成", flag: false },
{ querystate: "-3", queryStateName: "无特征", flag: false },
{ querystate: "19", queryStateName: "认定出错", flag: false },
{ querystate: "29", queryStateName: "复核出错", flag: false },
{ querystate: "99", queryStateName: "标记删除", flag: false },
{ querystate: "-1", queryStateName: "无效", flag: false },
{ querystate: "-2", queryStateName: "同步特征", flag: false }
{ value: "0", name: "等待比对", type: "querystates" },
{ value: "1", name: "正在对比", type: "querystates" },
{ value: "11", name: "正在认定", type: "querystates" },
{ value: "20", name: "认定完成", type: "querystates" },
{ value: "21", name: "正在复核", type: "querystates" },
{ value: "30", name: "复核完成", type: "querystates" },
{ value: "-3", name: "无特征", type: "querystates" },
{ value: "19", name: "认定出错", type: "querystates" },
{ value: "29", name: "复核出错", type: "querystates" },
{ value: "99", name: "标记删除", type: "querystates" },
{ value: "-1", name: "无效", type: "querystates" },
{ value: "-2", name: "同步特征", type: "querystates" }
]
};
},
......@@ -479,133 +521,31 @@ export default {
arr => !res.has(arr.userid) && res.set(arr.userid, arr.userid)
);
},
searchMore(prop, val) {},
// 多条件查询 获取查询类型
getQueryType(val) {
if (!val.flag) {
this.queryTypeBtns.forEach(item => {
// 传入的按钮flag为false 证明该按钮为未选中状态 才能点击
// 点击之后修改状态为true 给搜索请求参数赋值 并且把文字name传给标签
if (item.querytype === val.querytype) {
item.flag = true;
}
});
// 请求的参数添加选中的条件
this.reqParam.contrastCustomSearchReq.querytypes.push(val.querytype);
// 添加标签
this.tagClick(val.queryTypeName);
} else {
// 传入的值为true 当前值的状态是选中的 所以需要修改为false 变为未选中
// 清除掉搜索请求参数里的值
this.queryTypeBtns.forEach(item => {
if (item.querytype === val.querytype) {
item.flag = false;
}
});
this.reqParam.contrastCustomSearchReq.querytypes.forEach(
(item, index) => {
if (val.querytype === item) {
// 请求的参数删除选中的条件
this.reqParam.contrastCustomSearchReq.querytypes.splice(index, 1);
}
}
);
// 删除标签
this.handleClose(val.queryTypeName, false);
}
this.search();
},
// 多条件查询 获取优先级
getQueryClass(val) {
if (!val.flag) {
this.queryClassBtns.forEach(item => {
// 传入的按钮flag为false 证明该按钮为未选中状态 才能点击
// 点击之后修改状态为true 给搜索请求参数赋值 并且把文字name传给标签
if (item.queryclass === val.queryclass) {
item.flag = true;
}
});
// 请求的参数添加选中的条件
this.reqParam.contrastCustomSearchReq.queryclasss.push(val.queryclass);
// 添加标签
this.tagClick(val.queryClassName);
} else {
// 传入的值为true 当前值的状态是选中的 所以需要修改为false 变为未选中
// 清除掉搜索请求参数里的值
this.queryClassBtns.forEach(item => {
if (item.queryclass === val.queryclass) {
item.flag = false;
}
});
this.reqParam.contrastCustomSearchReq.queryclasss.forEach(
(item, index) => {
if (val.queryclass === item) {
// 请求的参数删除选中的条件
this.reqParam.contrastCustomSearchReq.queryclasss.splice(
index,
1
);
}
}
// 多条件查询 获取查询条件
getQueryType(data, type) {
let { name, value } = data;
let list = this.reqParam.contrastCustomSearchReq[type];
if (list.includes(value)) {
list = list.filter(item => item !== value);
this.dynamicTags = this.dynamicTags.filter(
item => item.value !== value
);
// 删除标签
this.handleClose(val.queryClassName, false);
}
this.search();
},
// 多条件查询 获取是否远程
getRemoteFlag(val) {
this.reqParam.contrastCustomSearchReq.remoteflags = val;
this.tagClick(val);
this.search();
},
// 多条件查询 获取查询状态
getQueryState(val) {
if (!val.flag) {
this.queryStateBtns.forEach(item => {
// 传入的按钮flag为false 证明该按钮为未选中状态 才能点击
// 点击之后修改状态为true 给搜索请求参数赋值 并且把文字name传给标签
if (item.querystate === val.querystate) {
item.flag = true;
}
});
// 请求的参数添加选中的条件
this.reqParam.contrastCustomSearchReq.querystates.push(val.querystate);
// 添加标签
this.tagClick(val.queryStateName);
this.search();
} else {
// 传入的值为true 当前值的状态是选中的 所以需要修改为false 变为未选中
// 清除掉搜索请求参数里的值
this.queryStateBtns.forEach(item => {
if (item.querystate === val.querystate) {
item.flag = false;
}
});
this.reqParam.contrastCustomSearchReq.querystates.forEach(
(item, index) => {
if (val.querystate === item) {
// 请求的参数删除选中的条件
this.reqParam.contrastCustomSearchReq.querystates.splice(
index,
1
);
}
}
);
// 删除标签
this.handleClose(val.queryStateName, false);
list.push(value);
this.dynamicTags.push(data);
}
this.reqParam.contrastCustomSearchReq[type] = JSON.parse(
JSON.stringify(list)
);
this.search();
},
// 格式化
dataFormat(row, colnum) {
dataFormat(row, prop) {
// colnum为使用了formatter的列
// clonum.property为当前列的prop值
// row为当前行，是一个类数组对象，可通过[]拿值
let prop = colnum.property;
if (prop.endsWith("time")) {
return moment(row[prop]).format("YYYY-MM-DD");
return row[prop] ? moment(row[prop]).format("YYYY-MM-DD") : "";
} else {
return row[prop];
}
......@@ -703,11 +643,11 @@ export default {
// 展开或关闭行
hadnlExpandChange(row, expanded) {
let rowDatas = {};
if (expanded) {
rowDatas.qid = row.qid;
rowDatas.children = row.children;
this.$set(this.$refs.confirmTable.tableData, row.qid, rowDatas);
}
// if (expanded) {
// rowDatas.qid = row.qid;
// rowDatas.children = row.children;
// this.$set(this.$refs.confirmTable.tableData, row.qid, rowDatas);
// }
console.info("展开---------row：", row);
console.info("展开---------expanded：", expanded);
},
......@@ -759,61 +699,14 @@ export default {
this.search();
},
// 标签关闭 isTag：是否为标签点击
handleClose(tag, isTag) {
if (isTag) {
var state = null;
var type = null;
// 获取查询类型的状态 并在请求中删除
this.queryTypeBtns.forEach(item => {
if (item.queryTypeName.indexOf(tag) > -1) {
state = item.querytype;
type = "querytype";
}
});
// 获取优先级的状态 并在请求中删除
this.queryClassBtns.forEach(item => {
if (item.queryClassName.indexOf(tag) > -1) {
state = item.queryclass;
type = "queryclase";
}
});
// 获取状态的状态 并在请求中删除
this.queryStateBtns.forEach(item => {
if (item.queryStateName.indexOf(tag) > -1) {
state = item.querystate;
type = "querystate";
}
});
// 获取优先级的状态 并在请求中删除
this.remoteFlagBtns.forEach(item => {
if (item.remoteFlagName.indexOf(tag) > -1) {
state = item.remoteflag;
type = "remoteflag";
}
});
console.info("当前要关闭的标签值====>", type, state);
if (type === "querytype") {
this.reqParam.contrastCustomSearchReq.querytypes.splice(
this.reqParam.contrastCustomSearchReq.querytypes.indexOf(state)
);
} else if (type === "queryclase") {
this.reqParam.contrastCustomSearchReq.queryclasss.splice(
this.reqParam.contrastCustomSearchReq.queryclasss.indexOf(state)
);
} else if (type === "querystate") {
this.reqParam.contrastCustomSearchReq.querystates.splice(
this.reqParam.contrastCustomSearchReq.querystates.indexOf(state)
);
} else {
console.info("是否远程！");
// this.reqParam.contrastCustomSearchReq.remoteflags.splice(
// this.reqParam.contrastCustomSearchReq.remoteflags.indexOf(state)
// );
}
this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
} else {
this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
}
handleClose(tag) {
let { type, value } = tag;
this.dynamicTags = this.dynamicTags.filter(item => item.value !== value);
this.reqParam.contrastCustomSearchReq[
type
] = this.reqParam.contrastCustomSearchReq[type].filter(
item => item !== value
);
this.search();
},
// 标签生成
......@@ -854,6 +747,11 @@ export default {
},
mounted() {
this.search();
// setTimeout(() => {
// [...document.querySelectorAll(".el-icon-arrow-right")].forEach(item => {
// item.classList = "el-icon-plus";
// });
// }, 200);
}
};
// 用户ID 下拉的数据
......@@ -1150,7 +1048,23 @@ const setQueryClass = [
{ queryclass: "5", name: "最低" }
];
</script>
<style lang="scss">
.el-dropdown-menu {
width: 120px;
height: 288px;
padding: 0;
.el-checkbox-group {
.el-checkbox {
height: 32px;
width: 102px;
padding-left: 16px;
&:hover {
background: #f5f5f7;
}
}
}
}
</style>
<style scoped>
div {
margin: 0;
......@@ -1195,6 +1109,11 @@ b {
line-height: 16px;
margin: 0 6px 0 8px;
}
/deep/.el-tag .el-icon-close::before {
margin-right: 8px;
display: block;
}
.el-icon-arrow-down {
color: #999999;
border: #999999 1px solid;
......@@ -1241,9 +1160,6 @@ b {
margin: 0;
padding: 0;
}
.el-checkbox {
display: block;
}
.el_select {
width: 168px;
height: 32px;
......@@ -1275,17 +1191,14 @@ b {
font-size: 14px;
font-weight: 350;
color: #333333;
cursor: pointer;
}
.btn:hover {
width: fit-content;
height: 22px;
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 350;
color: #055fe7;
line-height: 16px;
border: none;
}
.btn-active {
color: #055fe7;
}
.el-button--primary {
......@@ -1320,6 +1233,22 @@ b {
border: 1px solid #055fe7;
color: #055fe7;
}
/deep/.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
background-color: #055fe7 !important;
border: 1px solid #055fe7 !important;
}
/deep/.el-checkbox__inner:hover {
border-color: #055fe7;
/*background: #f5f5f7;*/
}
/deep/.el-checkbox__input + .el-checkbox__label {
color: #333333;
font-size: 14px;
}
/deep/.el-checkbox__input.is-focus .el-checkbox__inner {
border-color: #055fe7 !important;
}
.confirm_main_search {
width: 100%;
height: 34px;
......@@ -1348,6 +1277,7 @@ b {
height: 34px;
}
</style>
<!--table树-->
<style scoped>
.el-tree /deep/ .el-tree-node__expand-icon.expanded {
-webkit-transform: rotate(0deg);
......@@ -1355,7 +1285,7 @@ b {
}
/*有子节点 且未展开*/
.el-table/deep/ .el-icon-arrow-right:before {
background: url("../../icons/+.svg") no-repeat 0 3px;
background: url("../../icons/tree_f.svg") no-repeat 0 3px;
content: "";
display: block;
width: 16px;
......@@ -1366,7 +1296,7 @@ b {
/*有子节点 且已展开*/
.el-table/deep/ .el-table__expand-icon--expanded {
.el-icon-arrow-right:before {
background: url("../../icons/-.svg") no-repeat 0 3px;
background: url("../../icons/tree_c.svg") no-repeat 0 3px;
content: "";
display: block;
width: 15px;
......
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