<template>
<div class="app-container">
<div class="head">
<!--<img src="~@/assets/base_images/corner.png" alt="" />-->
<!--已办事项-->
</div>
<el-form
class="search"
:model="dataSearch"
@keyup.enter.native="dataList()"
>
<el-form-item class="radio-item" label-width="100px" label="协同业务">
<el-checkbox-group v-model="proposalTypeModel">
<div
v-for="(item, index) in proposalType"
:key="index"
class="colWidth"
>
<el-checkbox
class="checkbox"
:label="item.code"
border
@change="changeType"
>
<!--<img src="@/assets/icon/menu-icon.png" alt="" />-->
<el-tooltip
v-if="item.name.length > 10"
placement="top"
:content="item.name"
>
<span class="tooltip"
>{{ item.name.slice(0, 8) + "..." }}
<span class="num">1191</span></span
>
</el-tooltip>
<span v-else class="tooltip"
>{{ item.name }} <span class="num">1191</span></span
>
</el-checkbox>
</div>
</el-checkbox-group>
</el-form-item>
<el-row>
<el-col :span="8">
<el-form-item label="案件名称" label-width="100px">
<el-input
class="maxwidth"
v-model="dataSearch.caseName"
placeholder="案件名称"
clearable
/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="案件编号" label-width="100px">
<el-input
class="maxwidth"
v-model="dataSearch.caseNum"
placeholder="案件编号"
clearable
/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="嫌疑人姓名" label-width="100px">
<el-input
class="maxwidth"
v-model="dataSearch.suspectName"
placeholder="嫌疑人姓名"
clearable
/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="协同业务" label-width="100px">
<el-select
class="maxwidth"
v-model="dataSearch.caseStage"
placeholder="协同业务"
clearable
>
<el-option
v-for="item in caseStageconfig"
:key="item.key"
:label="item.label"
:value="item.label"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="协同状态" label-width="100px">
<el-select
class="maxwidth"
v-model="dataSearch.formState"
placeholder="协同状态"
clearable
>
<el-option
v-for="item in formStateconfig"
:key="item.key"
:label="item.label"
:value="item.key"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item class="big-width" label="操作时间" label-width="100px">
<el-date-picker
class="maxwidth"
v-model="dataSearch.timeHorizon"
type="daterange"
align="right"
unlink-panels
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
:picker-options="pickerOptions"
/>
</el-form-item>
</el-col>
</el-row>
<el-form-item class="submitbtns">
<el-button
type="primary"
icon="el-icon-search"
:loading="searchLoading"
@click="searchDataList()"
>查询</el-button
>
<el-button
type="primary"
icon="el-icon-refresh-left"
:loading="searchLoading"
@click="rebotDataList()"
>重置</el-button
>
</el-form-item>
</el-form>
<el-table
v-loading="listLoading"
:data="tableData"
border
height="450px"
highlight-current-row
class="eltable"
>
<el-table-column
v-for="column in columns"
:key="column.prop"
:type="column.type"
:align="column.align"
:prop="column.prop"
:label="column.title"
:show-overflow-tooltip="true"
:width="column.width"
/>
<el-table-column label="案件阶段" width="180">
<template slot-scope="scope">
<span v-if="scope.row.stage === '0'">待发起</span>
<span v-if="scope.row.stage === '1'">协同中</span>
<span v-if="scope.row.stage === '4'">已完成</span>
</template>
</el-table-column>
<el-table-column label="协同状态" width="80">
<template slot-scope="scope">
<span v-if="scope.row.formState === '0'">待发起</span>
<span v-if="scope.row.formState === '1'">协同中</span>
<span v-if="scope.row.formState === '4'">已完成</span>
</template>
</el-table-column>
<el-table-column label="查看案件详情" width="120" align="center">
<template slot-scope="scope">
<el-button
type="text"
@click="
showDetail(scope.row.caseNum, scope.row.id, scope.row.formState)
"
>查看
</el-button>
</template>
</el-table-column>
</el-table>
<div class="page_ination" style="text-align: center">
<!-- 分页 -->
<el-pagination
v-if="total !== 0"
background
:current-page.sync="currentPage"
:page-size="handleSizeChangeNum"
layout="total, sizes, prev, pager, next, jumper"
:page-sizes="pagesizeArr"
:total="total"
@current-change="handleCurrentChange"
@size-change="handleSizeChange"
/>
</div>
</div>
</template>
<script>
export default {
components: {},
data() {
return {
listLoading: false,
searchLoading: true,
loading: false,
pagesizeArr: [5, 10, 20, 50, 100],
currentPage: 1,
proposalTypeModel: [],
handleSizeChangeNum: 10,
total: 1,
dataSearch: {},
caseStageconfig: [
{
code: "1111",
name: "aaaaa"
},
{
code: "222222",
name: "bbbbb"
}
],
formStateconfig: [
{
code: "1111",
name: "aaaaa"
},
{
code: "222222",
name: "bbbbb"
}
],
columns: [
{
type: "index",
title: "序号",
width: "50",
align: "center"
},
{
prop: "caseName",
title: "案件名称",
width: ""
},
{
prop: "caseNum",
title: "案件编号",
width: "100",
align: "center"
},
{
prop: "caseMatter",
title: "协同事项",
width: ""
},
{
prop: "caseUnit",
title: "案件类别",
width: ""
},
{
prop: "createTime",
title: "创建时间",
width: "180"
},
{
prop: "concertedTime",
title: "发起时间",
width: "180"
},
{
prop: "childState",
title: "节点状态",
width: "250"
}
],
tableData: [
{
caseName: "案件1",
caseNum: "#qqq111",
caseMatter: "协同法院，检察院",
caseUnit: "案件类别",
createTime: "2016-05-02",
concertedTime: "2016-05-02",
childState: "开始"
},
{
caseName: "案件1",
caseNum: "#qqq111",
caseMatter: "协同法院，检察院",
caseUnit: "案件类别",
createTime: "2016-05-02",
concertedTime: "2016-05-02",
childState: "开始"
},
{
caseName: "案件1",
caseNum: "#qqq111",
caseMatter: "协同法院，检察院",
caseUnit: "案件类别",
createTime: "2016-05-02",
concertedTime: "2016-05-02",
childState: "开始"
}
],
proposalType: [
{
code: "1111",
name: "aaaaa"
},
{
code: "222222",
name: "bbbbb"
},
{
code: "3333",
name: "ffff"
},
{
code: "44444",
name: "hhhhh"
},
{
code: "555",
name: "kkkk"
},
{
code: "66666",
name: "mmmm"
},
{
code: "7777",
name: "vvvvvv"
}
],
pickerOptions: {
shortcuts: [
{
text: "最近一周",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit("pick", [start, end]);
}
},
{
text: "最近一个月",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit("pick", [start, end]);
}
},
{
text: "最近三个月",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
picker.$emit("pick", [start, end]);
}
}
]
}
};
},
created() {
this.dataList();
},
mounted() {},
methods: {
changeType(code) {
if (this.proposalTypeModel.length > 1) {
this.proposalTypeModel.splice(0, 1);
}
this.dataSearch.proposalType = this.proposalTypeModel[0];
// this.dataSearch.proposalType = code
},
searchDataList() {
this.searchLoading = true;
this.currentPage = 1;
this.dataList();
},
rebotDataList() {
this.searchLoading = true;
this.dataSearch = {};
this.dataList();
},
dataList() {},
handleSizeChange(val) {
const _this = this;
this.handleSizeChangeNum = val;
_this.dataList();
},
handleCurrentChange(val) {
const _this = this;
this.currentPage = val;
_this.dataList();
},
showDetail(caseNum, flowTaskId, formState) {
// const formFinish = formState === '4' ? '1' : '0'
const query = {
caseNum,
flowTaskId
};
const { href } = this.$router.resolve({
name: "casedetail",
query: query
});
window.open(href, "_blank");
}
}
};
</script>
<style lang="less" scoped>
/deep/.el-form-item__content {
text-align: left;
}
/deep/.el-date-editor .el-range-separator {
width: 8%;
}
.tooltip {
display: inline-flex;
width: 180px;
vertical-align: top;
justify-content: space-between;
}
.checkbox {
margin-bottom: 15px;
/deep/.el-checkbox__input {
display: none;
}
}
.colWidth {
width: 20%;
display: inline-block;
}
.el-checkbox.is-bordered + .el-checkbox.is-bordered {
margin-left: 0;
}
.maxwidth {
max-width: 300px;
}
.el-select {
display: block;
}
.submitbtns {
display: flex;
justify-content: center;
align-items: center;
padding: 11px 0;
/*width: 397px;*/
flex-direction: column;
border-left: 1px solid
}
</style>
