LittleBeeSaas/src/views/Basic/WorkOrder/index.vue

<template>
  <div>
    <div class="cardTitle">
        <a-space size="large">
            <span>工单管理</span>
            <a-radio-group v-model='activeName' button-style="solid" @change="tabsChange">
                <a-radio-button value="0">
                全部
                </a-radio-button>
                <a-radio-button value="1">
                待分配
                </a-radio-button>
                <a-radio-button value="2">
                工单池
                </a-radio-button>
                <a-radio-button value="3">
                已接单
                </a-radio-button>
                <a-radio-button value="4">
                处理中
                </a-radio-button>
                <a-radio-button value="5">
                已完成
                </a-radio-button>
                <a-radio-button value="6">
                已评价
                </a-radio-button>
                <a-radio-button value="7">
                已拒绝
                </a-radio-button>
            </a-radio-group>
        </a-space>
    </div>
    <div class="search-box">
      <a-row>
        <a-col :span="20">
          <a-space size="large">
            <a-select placeholder="请选择" style="width:200px"/>
            <a-button type="primary">查 询</a-button>
            <a-button>重 置</a-button>
          </a-space>
        </a-col>
        <a-col :span="4">
            <a-button class='add-btn' @click="show=true">添加工单</a-button>
        </a-col>
      </a-row>
    </div>
    <div class="main">
      <div style="margin-bottom: 16px">
        <!-- 批量操作 -->
        <a-select
          type="primary"
          v-model="activeAction"
          :disabled="!hasSelected"
          :loading="loading"
          style="width: 120px"
          @change="Actions"
          placeholder="请选择操作"
        >
          批量
          <a-select-option v-for="item in ActionsList" :key="item.value">
            {{ item.label }}
          </a-select-option>
        </a-select>
        <span style="margin-left: 8px">
          <template v-if="hasSelected">
            {{ `已选择 ${selectedRowKeys.length} 条` }}
          </template>
        </span>
      </div>
      <!-- 表格 -->
      <a-table
        :columns="columns"
        :data-source="tableData"
        :pagination="pagination"
        :scroll="{ x: 1400 }"
		 @change="handleTableChange"
        :row-selection="{
          selectedRowKeys: selectedRowKeys,
          onChange: selectionChoosed,
        }"
        :row-key="
          (record, index) => {
            return record.id;
          }
        "
      >
        <span slot="name" slot-scope="text, row">
          {{
            row.manageBuildingName +
            "栋/" +
            row.manageUnitName +
            "单元/" +
            row.floorLocation +
            "层-" +
            row.name +
            "室"
          }}
        </span>
        <span slot="action" slot-scope="text, row">
          <a-space>
            <a class="ant-dropdown-link" v-show="row.status===1" @click="put(row)">下发至工单池</a>
            <a class="ant-dropdown-link" v-show="row.status===1" @click="shift(row)">转移至待分配</a>
            <a class="ant-dropdown-link" v-show="row.status===1" @click="assign(row)">指派</a>
            <a class="ant-dropdown-link" v-show="row.status===1" @click="shiftAssign(row)">转派</a>
            <a class="ant-dropdown-link" v-show="row.status===1" @click="finish(row)">完成</a>
            <a class="ant-dropdown-link" v-show="row.status===1" @click="deal(row)">处理</a>
            <a class="ant-dropdown-link" v-show="row.status===1" @click="refuse(row)">拒绝</a>
          </a-space>
        </span>
        <span slot="tags" slot-scope="tag">
           <a-tag
            :color="tag === 1 ? 'volcano' : tag === 2 ? 'geekblue' : tag === 3 ? 'geekblue' : 'red'"
          >
            {{ tag === 1 ? "业主" : tag === 2 ? "业主亲属" :tag === 3 ? "租户":tag === 4 ? "租户亲属":'-'  }}
          </a-tag>
        </span>
      </a-table>
    </div>
    <add-work :visible='show' :form="form" @onClose="onClose" :rules="rules"></add-work>
  </div>
</template>

<script>
import addWork from "../WorkOrder/addWorkOrder.vue"
export default {
	components:{
		addWork
	},
	data() {
		return {
			form:{
				identity:null
			},
			rules:{},
			show: false,
			activeName:'0',
			pagination: {
				current: 1,
				total: 0,
				pageSize: 10,
				showTotal: (total) => `共 ${total} 条`,
				showSizeChanger: true,
				showQuickJumper: true,
			},
			searchForm:{
				status:null,
				identity:null
			},
			activeAction: undefined,
			loading: false,
			// 选择的index
			selectedRowKeys: [],
			tableChoosed: [],
			// 分页
			//   列
			columns: [
				{
					title: "工单状态",
					key: "tags",
					width: "14%",
					dataIndex: "status",
					scopedSlots: { customRender: "tags" },
				},
				{
					title: "工单号",
					width: "14%",
					dataIndex: "code",
				},
				{
					title: "申请人",
					width: "14%",
					dataIndex: "people",
				},
				{
					title: "手机号",
					width: "14%",
					dataIndex: "tel",
				},
				{
					title: "工单类型",
					width: "14%",
					dataIndex: "type",
				},
				{
					title: "工单类型",
					width: "14%",
					dataIndex: "content",
				},
				{
					title: "操作",
					dataIndex: "action",
					key: "action",
					width: "300",
					fixed: "right",
					scopedSlots: { customRender: "action" },
				},
			],
			//   数据
			tableData: [{},
			],
			ActionsList: [
				{
					label: "批量删除",
					value: 1,
				},
				{
					label: "批量导出",
					value: 2,
				},
			],
		};
	},
	mounted(){
		this.getData()
	},
	methods: {
		getData(){},
		tabsChange(e){
			this.searchForm.status = e.target.value
			this.getData()
		},
		onClose(){
			this.show = false;
		},
		// 下发至工单池
		put(){

		},
		// 转移至待分配
		shift(){

		},
		// 指派
		assign(){

		},
		// 转派
		shiftAssign(){

		},
		// 完成
		finish(){

		},
		// 处理
		deal(){

		},
		// 拒绝
		refuse(){

		},
		handleTableChange(pagination) {
			console.log(pagination);
			const pager = { ...this.pagination };
			pager.current = pagination.current;
			pager.pageSize = pagination.pageSize;
			this.pagination = pager;
		},
		Actions(data) {
			console.log(data);
			this.activeAction = undefined;
		},
		selectionChoosed(data) {
			console.log(data);
			this.tableChoosed = data;
		},
	},
	computed: {
		// 是否选择selection
		hasSelected() {
			return this.selectedRowKeys.length > 0;
		},
	},
};
</script>

<style lang="less" scoped>
</style>