1 changed files with 393 additions and 5 deletions
Unified View
Diff Options
+ 393
- 5
src/views/inspection/ProhibitedList.vue
View File
| @@ -1,16 +1,404 @@ | |||||
| <template> | <template> | ||||
| <div> | |||||
| 违禁记录 | |||||
| </div> | |||||
| <div class="box-center"> | |||||
| <!-- 头 --> | |||||
| <div class="app-top"> | |||||
| <div class="app-titel" v-if="orgType != 3"> | |||||
| <div | |||||
| class="label" | |||||
| style="color: #32363d; font-weight: 400; font-size: 16px" | |||||
| > | |||||
| 项目选择： | |||||
| </div> | |||||
| <div style="margin-left: 8px"> | |||||
| <el-select | |||||
| v-model="searchForm.projectId" | |||||
| @change="houseChange" | |||||
| placeholder="请选择" | |||||
| filterable | |||||
| > | |||||
| <el-option | |||||
| v-for="item in houseList" | |||||
| :key="item.id" | |||||
| :label="item.propertyName" | |||||
| :value="item.id" | |||||
| > | |||||
| </el-option> | |||||
| </el-select> | |||||
| </div> | |||||
| </div> | |||||
| <!-- 选择时间 --> | |||||
| <div class="app-titel" style="margin-top: 1em"> | |||||
| <div class="label">接待时间：</div> | |||||
| <div class="toptimeqhuan"> | |||||
| <div | |||||
| v-for="(data, index) in timeToAhouseList" | |||||
| :key="index" | |||||
| :class="{ tophove: TimetoAhoose == data.id }" | |||||
| @click="tabtimetap(data.id)" | |||||
| > | |||||
| {{ data.title }} | |||||
| </div> | |||||
| </div> | |||||
| <div style="margin-left: 26px"> | |||||
| <el-date-picker | |||||
| @change="confirmtime" | |||||
| v-model="customtime" | |||||
| type="daterange" | |||||
| range-separator="-" | |||||
| :default-time="['00:00:00', '23:59:59']" | |||||
| value-format="yyyy-MM-dd" | |||||
| start-placeholder="开始日期" | |||||
| end-placeholder="结束日期" | |||||
| > | |||||
| </el-date-picker> | |||||
| </div> | |||||
| </div> | |||||
| <!-- 违禁标识 --> | |||||
| <div class="app-titel" style="margin-top: 1em"> | |||||
| <div class="div-lab"> | |||||
| <div class="label">违禁标识：</div> | |||||
| <el-select | |||||
| clearable | |||||
| filterable | |||||
| v-model="searchForm.tag" | |||||
| placeholder="请选择" | |||||
| class="div-inp" | |||||
| > | |||||
| <el-option | |||||
| v-for="item in prohibitedSignsList" | |||||
| :key="item.value" | |||||
| :label="item.label" | |||||
| :value="item.value" | |||||
| > | |||||
| </el-option> | |||||
| </el-select> | |||||
| </div> | |||||
| <div class="div-lab"> | |||||
| <div class="label">处理状态：</div> | |||||
| <el-select | |||||
| clearable | |||||
| filterable | |||||
| v-model="searchForm.status" | |||||
| placeholder="请选择" | |||||
| class="div-inp" | |||||
| > | |||||
| <el-option | |||||
| v-for="item in processingStatusList" | |||||
| :key="item.value" | |||||
| :label="item.label" | |||||
| :value="item.value" | |||||
| > | |||||
| </el-option> | |||||
| </el-select> | |||||
| </div> | |||||
| <div class="div-lab"> | |||||
| <div class="label">置业顾问：</div> | |||||
| <div> | |||||
| <el-input | |||||
| maxlength="10" | |||||
| clearable | |||||
| v-model="searchForm.name" | |||||
| ></el-input> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| <!-- 筛选 --> | |||||
| <div class="app-titel" style="margin-top: 1em; padding-left: 100px"> | |||||
| <el-button type="primary">筛选</el-button> | |||||
| <el-link style="margin-left: 1em" :underline="false" type="primary" | |||||
| >清空筛选条件</el-link | |||||
| > | |||||
| </div> | |||||
| </div> | |||||
| <!-- 表格 --> | |||||
| <div class="cen-tab"> | |||||
| <el-table :data="tableData" stripe style="width: 100%"> | |||||
| <el-table-column prop="batchId" label="序号" width="70" align="center"> | |||||
| <template slot-scope="scope"> | |||||
| <span> {{ scope.$index + 1 }}</span> | |||||
| </template> | |||||
| </el-table-column> | |||||
| <el-table-column prop="houseName" label="接待编号" align="center"> | |||||
| </el-table-column> | |||||
| <el-table-column | |||||
| prop="accountNum" | |||||
| label="接待开始时间" | |||||
| align="center" | |||||
| > | |||||
| </el-table-column> | |||||
| <el-table-column | |||||
| prop="receptionCount" | |||||
| label="顾问" | |||||
| align="center" | |||||
| > | |||||
| </el-table-column> | |||||
| <el-table-column | |||||
| prop="activeCustomer" | |||||
| label="客户" | |||||
| align="center"> | |||||
| </el-table-column> | |||||
| <el-table-column | |||||
| prop="prohibitedCustomer" | |||||
| label="违禁命中" | |||||
| align="center" | |||||
| width="140" | |||||
| > | |||||
| </el-table-column> | |||||
| <el-table-column | |||||
| prop="sumDuration" | |||||
| label="处理状态" | |||||
| align="center" | |||||
| width="100" | |||||
| > | |||||
| <template slot-scope="scope"> | |||||
| {{ scope.row.sumDuration }} | |||||
| </template> | |||||
| </el-table-column> | |||||
| <el-table-column | |||||
| prop="fraction" | |||||
| label="处理人" | |||||
| align="center" | |||||
| width="110" | |||||
| > | |||||
| </el-table-column> | |||||
| <el-table-column | |||||
| prop="prohibitedZb" | |||||
| label="违禁标识" | |||||
| align="center" | |||||
| width="100" | |||||
| > | |||||
| </el-table-column> | |||||
| <el-table-column | |||||
| prop="addtodigestCount" | |||||
| label="无效原因" | |||||
| align="center" | |||||
| width="140" | |||||
| ></el-table-column> | |||||
| <el-table-column label="操作" align="center" width="100"> | |||||
| <template slot-scope="{ row }"> | |||||
| <el-button type="text">查看</el-button> | |||||
| <el-button type="text">无效</el-button> | |||||
| <el-button type="text">有效</el-button> | |||||
| </template> | |||||
| </el-table-column> | |||||
| </el-table> | |||||
| <div style="display: flex; justify-content: flex-end; margin-top: 10px"> | |||||
| <el-pagination | |||||
| @size-change="handleSizeChange" | |||||
| @current-change="handleCurrentChange" | |||||
| :current-page="page" | |||||
| :page-sizes="[10, 30, 50]" | |||||
| :page-size="pagesize" | |||||
| layout="total, sizes, prev, pager, next, jumper" | |||||
| :total="total" | |||||
| > | |||||
| </el-pagination> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| </template> | </template> | ||||
| <script> | <script> | ||||
| export default { | export default { | ||||
| data() { | |||||
| return { | |||||
| houseList: [], // 可切换的项目列表 | |||||
| orgType: localStorage.getItem("orgType"), // 组织类型 | |||||
| prohibitedSignsList: [ | |||||
| // 违禁标识 | |||||
| { | |||||
| label: "全部", | |||||
| value: "", | |||||
| }, | |||||
| { | |||||
| label: "有效违禁", | |||||
| value: "1", | |||||
| }, | |||||
| { | |||||
| label: "无效违禁", | |||||
| value: "2", | |||||
| }, | |||||
| ], | |||||
| processingStatusList: [ | |||||
| // 违禁处理状态 | |||||
| { | |||||
| label: "全部", | |||||
| value: "", | |||||
| }, | |||||
| { | |||||
| label: "待处理", | |||||
| value: "1", | |||||
| }, | |||||
| { | |||||
| label: "已处理", | |||||
| value: "2", | |||||
| }, | |||||
| ], | |||||
| } | |||||
| searchForm: { | |||||
| projectId: "", | |||||
| tag: "", // 选中违禁标识id （暂时使用） | |||||
| status: "", // 处理状态筛选id （暂时使用） | |||||
| name: "", // 置业顾问名称 （暂时使用） | |||||
| }, | |||||
| timeToAhouseList: [ | |||||
| // 筛选时间数组 | |||||
| { | |||||
| title: "近7天", | |||||
| id: 4, | |||||
| }, | |||||
| { | |||||
| title: "近15天", | |||||
| id: 5, | |||||
| }, | |||||
| { | |||||
| title: "近30天", | |||||
| id: 6, | |||||
| }, | |||||
| ], | |||||
| TimetoAhoose: 4, // 选中时间的下表 | |||||
| customtime: [], // 自定义时间选择数据 | |||||
| tableData: [], // 表格数据 | |||||
| }; | |||||
| }, | |||||
| created() { | |||||
| this.zkhousePage(); | |||||
| if (this.$route.query.date) { | |||||
| this.time = this.$route.query.date.split(","); | |||||
| this.searchForm.staDate = this.time[0]; | |||||
| this.searchForm.endDate = this.time[1]; | |||||
| console.log("时间"); | |||||
| } | |||||
| }, | |||||
| methods: { | |||||
| // 重置入参 | |||||
| resetParams() { | |||||
| // this.searchForm | |||||
| }, | |||||
| // 获取可以选择的项目 | |||||
| zkhousePage() { | |||||
| this.$api.api | |||||
| .findHouseByUser({ | |||||
| orgType: this.orgType, | |||||
| }) | |||||
| .then((res) => { | |||||
| // console.log(res) | |||||
| this.houseList = res.data; | |||||
| if (this.orgType == 3) { | |||||
| this.searchForm.projectId = localStorage.getItem("houseId"); | |||||
| } else { | |||||
| this.searchForm.projectId = res.data[0].id; | |||||
| } | |||||
| this.houseChange(); | |||||
| }); | |||||
| }, | |||||
| // 项目选择改变的时候 | |||||
| houseChange() {}, | |||||
| // 固定类型时间选择 | |||||
| tabtimetap(index) {}, | |||||
| // 自定义时间选择 | |||||
| confirmtime() {}, | |||||
| }, | |||||
| }; | |||||
| </script> | </script> | ||||
| <style lang="" scoped > | |||||
| <style lang="scss" scoped> | |||||
| .box-center { | |||||
| width: 100%; | |||||
| padding: 15px; | |||||
| min-width: 1000px; | |||||
| padding-bottom: 100px; | |||||
| .app-top { | |||||
| width: 100%; | |||||
| background: #ffffff; | |||||
| box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04); | |||||
| border-radius: 4px; | |||||
| padding-top: 15px; | |||||
| padding-bottom: 15px; | |||||
| .app-titel { | |||||
| width: 100%; | |||||
| display: flex; | |||||
| align-items: center; | |||||
| flex-wrap: wrap; | |||||
| .label { | |||||
| font-size: 14px; | |||||
| font-weight: 400; | |||||
| color: #32363d; | |||||
| line-height: 32px; | |||||
| margin-left: 15px; | |||||
| min-width: 100px; | |||||
| text-align: right; | |||||
| } | |||||
| .toptimeqhuan { | |||||
| height: 30px; | |||||
| background: #ffffff; | |||||
| display: flex; | |||||
| align-items: center; | |||||
| div { | |||||
| padding-left: 20px; | |||||
| padding-right: 20px; | |||||
| text-align: center; | |||||
| line-height: 30px; | |||||
| font-size: 14px; | |||||
| border-radius: 4px; | |||||
| border: 1px solid #e0e0e0; | |||||
| } | |||||
| .btn { | |||||
| padding-left: 20px; | |||||
| padding-right: 20px; | |||||
| text-align: center; | |||||
| font-size: 14px; | |||||
| margin-right: 15px; | |||||
| border-radius: 4px; | |||||
| border: 1px solid #e0e0e0; | |||||
| } | |||||
| } | |||||
| .div-lab { | |||||
| display: flex; | |||||
| margin: 5px; | |||||
| } | |||||
| } | |||||
| } | |||||
| .cen-tab { | |||||
| width: 100%; | |||||
| padding: 15px; | |||||
| background: #ffffff; | |||||
| margin-top: 15px; | |||||
| } | |||||
| .tophove { | |||||
| color: #ffffff; | |||||
| background: #409eff; | |||||
| border-color: #409eff; | |||||
| } | |||||
| .div-inp { | |||||
| width: 250px; | |||||
| } | |||||
| } | |||||
| </style> | </style> | ||||