|
|
@@ -0,0 +1,238 @@
|
|
|
+<template>
|
|
|
+ <div class="list-container">
|
|
|
+ <el-row :gutter="10" style="margin-bottom: 10px">
|
|
|
+ <el-col :span="4">
|
|
|
+ <el-input v-model="queryForm.orderTypeDesc" placeholder="工单类型" />
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="4">
|
|
|
+ <el-input v-model="queryForm.orderStatus" placeholder="工单状态" />
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="4">
|
|
|
+ <el-input
|
|
|
+ v-model="queryForm.assignUserName"
|
|
|
+ placeholder="分派人员姓名" />
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-button icon="el-icon-plus" type="primary" @click="fetchData">
|
|
|
+ 查询
|
|
|
+ </el-button>
|
|
|
+ <el-button icon="el-icon-refresh-right" @click="reset">重置</el-button>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <vab-query-form>
|
|
|
+ <vab-query-form-left-panel :span="12">
|
|
|
+ <el-button
|
|
|
+ icon="el-icon-plus"
|
|
|
+ size="mini"
|
|
|
+ type="primary"
|
|
|
+ @click="$refs.edit.init()">
|
|
|
+ 新建
|
|
|
+ </el-button>
|
|
|
+ </vab-query-form-left-panel>
|
|
|
+ <vab-query-form-right-panel :span="12">
|
|
|
+ <el-button icon="el-icon-download" @click="exportData" />
|
|
|
+ <table-tool :check-list.sync="checkList" :columns="columns" />
|
|
|
+ </vab-query-form-right-panel>
|
|
|
+ </vab-query-form>
|
|
|
+
|
|
|
+ <el-table v-loading="listLoading" border :data="list" :height="height">
|
|
|
+ <el-table-column
|
|
|
+ v-for="(item, index) in finallyColumns"
|
|
|
+ :key="index"
|
|
|
+ align="center"
|
|
|
+ :label="item.label"
|
|
|
+ :prop="item.prop"
|
|
|
+ show-overflow-tooltip
|
|
|
+ :sortable="item.sortable"
|
|
|
+ :width="item.width">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <span v-if="item.prop === 'orderTypeDesc'">
|
|
|
+ {{ row.orderTypeDesc }}
|
|
|
+ </span>
|
|
|
+ <span v-if="item.prop === 'orderStatus'">
|
|
|
+ {{ row.orderStatus }}
|
|
|
+ </span>
|
|
|
+ <span v-if="item.prop === 'assignUserName'">
|
|
|
+ {{ row.assignUserName }}
|
|
|
+ </span>
|
|
|
+ <span v-if="item.prop === 'feedBack'">
|
|
|
+ {{ row.feedBack }}
|
|
|
+ </span>
|
|
|
+ <span v-if="item.prop === 'createName'">
|
|
|
+ {{ row.createName }}
|
|
|
+ </span>
|
|
|
+ <span v-if="item.prop === 'createTime'">
|
|
|
+ {{ row.createTime }}
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column align="center" label="操作" width="85">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <el-button type="text" @click="handleDetail(row)">查看</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <template #empty>
|
|
|
+ <el-image
|
|
|
+ class="vab-data-empty"
|
|
|
+ :src="require('@/assets/empty_images/data_empty.png')" />
|
|
|
+ </template>
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ <el-pagination
|
|
|
+ background
|
|
|
+ :current-page="queryForm.pageNum"
|
|
|
+ :layout="layout"
|
|
|
+ :page-size="queryForm.pageSize"
|
|
|
+ :total="total"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ @size-change="handleSizeChange" />
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import to from 'await-to-js'
|
|
|
+ import api from '@/api/work/index'
|
|
|
+ import downloadFileByByte from '@/utils/base64ToFile'
|
|
|
+ import TableTool from '@/components/table/TableTool'
|
|
|
+
|
|
|
+ export default {
|
|
|
+ components: { TableTool },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ activeName: 'first',
|
|
|
+ layout: 'total, sizes, prev, pager, next, jumper',
|
|
|
+ queryForm: {
|
|
|
+ orderTypeDesc: '',
|
|
|
+ orderStatus: '',
|
|
|
+ assignUserName: '',
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ },
|
|
|
+ total: 0,
|
|
|
+ listLoading: false,
|
|
|
+ list: [],
|
|
|
+ selectRows: [],
|
|
|
+ checkList: [],
|
|
|
+ columns: [
|
|
|
+ {
|
|
|
+ label: '工单类型',
|
|
|
+ width: 'auto',
|
|
|
+ prop: 'orderTypeDesc',
|
|
|
+ sortable: true,
|
|
|
+ disableCheck: true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '工单状态',
|
|
|
+ width: 'auto',
|
|
|
+ prop: 'orderStatus',
|
|
|
+ sortable: true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '分派人员',
|
|
|
+ width: 'auto',
|
|
|
+ prop: 'assignUserName',
|
|
|
+ sortable: true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '反馈信息',
|
|
|
+ width: 'auto',
|
|
|
+ prop: 'feedBack',
|
|
|
+ sortable: true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '创建人',
|
|
|
+ width: 'auto',
|
|
|
+ prop: 'createName',
|
|
|
+ sortable: true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '创建时间',
|
|
|
+ width: 'auto',
|
|
|
+ prop: 'createTime',
|
|
|
+ sortable: true,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ height() {
|
|
|
+ return this.$baseTableHeight(1)
|
|
|
+ },
|
|
|
+ finallyColumns() {
|
|
|
+ console.log('finallyColums')
|
|
|
+ return this.columns.filter((item) =>
|
|
|
+ this.checkList.includes(item.label)
|
|
|
+ )
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.fetchData()
|
|
|
+ },
|
|
|
+
|
|
|
+ methods: {
|
|
|
+ handleClick(tab) {
|
|
|
+ console.log(tab, 'tab')
|
|
|
+ this.fetchData()
|
|
|
+ },
|
|
|
+ async fetchData() {
|
|
|
+ this.listLoading = true
|
|
|
+ const params = { ...this.queryForm }
|
|
|
+ const [err, res] = await to(api.getList(params))
|
|
|
+ if (err) return (this.listLoading = false)
|
|
|
+ this.list = res.data.list || []
|
|
|
+ this.total = res.data.total
|
|
|
+ this.listLoading = false
|
|
|
+ },
|
|
|
+ exportData() {
|
|
|
+ let exportFrom = JSON.parse(JSON.stringify(this.queryForm))
|
|
|
+ exportFrom.columns = this.finallyColumns.map((item) => item.label)
|
|
|
+ api
|
|
|
+ .deriveList(exportFrom)
|
|
|
+ .then((res) => {
|
|
|
+ if (res.data.list.content) {
|
|
|
+ downloadFileByByte(res.data.list.content, '工单数据.xlsx')
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ console.error(err)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //详情
|
|
|
+ handleDetail(row) {
|
|
|
+ this.$router.push({
|
|
|
+ path: './detail',
|
|
|
+ query: {
|
|
|
+ id: row.id,
|
|
|
+ privateCus: 1,
|
|
|
+ },
|
|
|
+ })
|
|
|
+ },
|
|
|
+ reset() {
|
|
|
+ this.queryForm = {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ orderTypeDesc: '',
|
|
|
+ orderStatus: '',
|
|
|
+ assignUserName: '',
|
|
|
+ }
|
|
|
+ this.fetchData()
|
|
|
+ },
|
|
|
+
|
|
|
+ handleSizeChange(val) {
|
|
|
+ this.queryForm.pageSize = val
|
|
|
+ this.fetchData()
|
|
|
+ },
|
|
|
+ handleCurrentChange(val) {
|
|
|
+ this.queryForm.pageNum = val
|
|
|
+ this.fetchData()
|
|
|
+ },
|
|
|
+ setSelectRows(val) {
|
|
|
+ this.selectRows = val
|
|
|
+ },
|
|
|
+ },
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ $base: '.list';
|
|
|
+</style>
|
wangxingcheng