|
|
@@ -2,13 +2,14 @@
|
|
|
<div class="back-line-main">
|
|
|
<div class="back-line-header">
|
|
|
<div class="back-line-header-title">
|
|
|
- <h2>人力达标</h2>
|
|
|
+ <h2>渠道人员详情</h2>
|
|
|
<div>
|
|
|
<span>时间筛选</span>
|
|
|
<a-range-picker
|
|
|
v-model="formState.time"
|
|
|
@change="timeChange"
|
|
|
- valueFormat="YYYY-MM-DD HH:mm:ss"
|
|
|
+ valueFormat="YYYY-MM-DD"
|
|
|
+ :defaultValue="defaultTime"
|
|
|
>
|
|
|
<a-icon slot="suffixIcon" type="calendar" />
|
|
|
</a-range-picker>
|
|
|
@@ -17,9 +18,15 @@
|
|
|
button-style="solid"
|
|
|
v-model="formState.days"
|
|
|
>
|
|
|
- <a-radio-button :value="1"> 近1天 </a-radio-button>
|
|
|
- <a-radio-button :value="2"> 近7天 </a-radio-button>
|
|
|
- <a-radio-button :value="3"> 近30天 </a-radio-button>
|
|
|
+ <a-radio-button :value="1" @click="formState.time = []">
|
|
|
+ 当天
|
|
|
+ </a-radio-button>
|
|
|
+ <a-radio-button :value="2" @click="formState.time = []">
|
|
|
+ 近7天
|
|
|
+ </a-radio-button>
|
|
|
+ <a-radio-button :value="3" @click="formState.time = []">
|
|
|
+ 近30天
|
|
|
+ </a-radio-button>
|
|
|
</a-radio-group>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -65,7 +72,13 @@
|
|
|
</div>
|
|
|
<div class="list">
|
|
|
<div class="personnel-message">
|
|
|
- <div v-for="item in list" :key="item.userId">
|
|
|
+ <div
|
|
|
+ v-for="(item, index) in list"
|
|
|
+ :key="item.userId"
|
|
|
+ :class="
|
|
|
+ index < 4 ? 'list-1' : index > 3 && index < 8 ? 'list-2' : 'list-3'
|
|
|
+ "
|
|
|
+ >
|
|
|
<p>姓名:{{ item.name }}</p>
|
|
|
<p>机构归属:{{ item.deptName }}</p>
|
|
|
<!-- <p>
|
|
|
@@ -88,6 +101,11 @@
|
|
|
src="../../assets/img/woman.png"
|
|
|
alt=""
|
|
|
/>
|
|
|
+ <img
|
|
|
+ v-if="!item.filePath && !item.sex"
|
|
|
+ src="../../assets/img/normal.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
</div>
|
|
|
<p>
|
|
|
<a-button type="primary" @click="teamMessage(item)">详情</a-button>
|
|
|
@@ -101,6 +119,7 @@
|
|
|
show-less-items
|
|
|
show-size-changer
|
|
|
show-quick-jumper
|
|
|
+ :show-total="(total) => `共 ${total} 条数据`"
|
|
|
@change="pageChange"
|
|
|
:page-size.sync="pageInfo.pageSize"
|
|
|
:pageSizeOptions="['12', '24', '36', '48']"
|
|
|
@@ -112,6 +131,7 @@
|
|
|
|
|
|
<script>
|
|
|
import fromRow from "@/components/form/FormRow";
|
|
|
+import moment from "moment";
|
|
|
export default {
|
|
|
components: {
|
|
|
fromRow,
|
|
|
@@ -126,12 +146,12 @@ export default {
|
|
|
houseId: undefined,
|
|
|
provinceId: undefined,
|
|
|
days: "",
|
|
|
- time: [],
|
|
|
+ time: [moment().format("YYYY-MM-DD"), moment().format("YYYY-MM-DD")],
|
|
|
name: undefined,
|
|
|
userCode: undefined,
|
|
|
phoneNumber: undefined,
|
|
|
- createtimeStart: undefined,
|
|
|
- createtimeEnd: undefined,
|
|
|
+ createtimeStart: moment().format("YYYY-MM-DD"),
|
|
|
+ createtimeEnd: moment().format("YYYY-MM-DD"),
|
|
|
},
|
|
|
process: process.env.VUE_APP_API_BASE_URL,
|
|
|
|
|
|
@@ -148,6 +168,7 @@ export default {
|
|
|
watch: {
|
|
|
"formState.days"() {
|
|
|
this.getList();
|
|
|
+ // this.formState.time = [];
|
|
|
},
|
|
|
},
|
|
|
mounted() {
|
|
|
@@ -162,6 +183,8 @@ export default {
|
|
|
timeChange(val) {
|
|
|
this.formState.createtimeStart = val[0];
|
|
|
this.formState.createtimeEnd = val[1];
|
|
|
+ this.formState.days = 0;
|
|
|
+
|
|
|
this.getList();
|
|
|
},
|
|
|
getList() {
|
|
|
@@ -264,6 +287,7 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
.list {
|
|
|
+ flex: 1;
|
|
|
padding: 15px;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
@@ -321,6 +345,24 @@ export default {
|
|
|
}
|
|
|
// margin-right: 2%;
|
|
|
}
|
|
|
+ > div.list-1 {
|
|
|
+ background: rgba(135, 229, 42, 0.1);
|
|
|
+ box-shadow: 0px 2px 8px 0px rgba(135, 229, 42, 0.15);
|
|
|
+ border-radius: 8px 8px 8px 8px;
|
|
|
+ border: 1px solid rgba(135, 229, 42, 0.5);
|
|
|
+ }
|
|
|
+ > div.list-2 {
|
|
|
+ background: #fff7ee;
|
|
|
+ box-shadow: 0px 2px 8px 0px rgba(255, 173, 76, 0.15);
|
|
|
+ border-radius: 8px 8px 8px 8px;
|
|
|
+ border: 1px solid rgba(255, 173, 76, 0.5);
|
|
|
+ }
|
|
|
+ > div.list-3 {
|
|
|
+ background: #f9faff;
|
|
|
+ box-shadow: 0px 2px 8px 0px rgba(42, 85, 229, 0.15);
|
|
|
+ border-radius: 8px 8px 8px 8px;
|
|
|
+ border: 1px solid rgba(42, 85, 229, 0.5);
|
|
|
+ }
|
|
|
}
|
|
|
.page {
|
|
|
display: flex;
|