park-shanghai/src/views/emergency-rescue/workOrder/index.vue

<template>
  <!-- 加根元素防止控制台报错 -->
  <section style="height: 100%">
    <tablePage @handlerAdd="handlerAdd()" @handlerExport="handlerExport()">
      <template #search>
        <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="68px" class="search-form">
          <el-form-item label="工单地址" prop="gdms">
            <el-input v-model="queryParams.gdms" placeholder="请输入" clearable />
          </el-form-item>
          <el-form-item label="工单类型" prop="gdType">
            <el-input v-model="queryParams.gdType" placeholder="请输入" clearable />
          </el-form-item>
          <el-form-item label="工单等级" prop="gdLevel">
            <el-input v-model="queryParams.gdLevel" placeholder="请输入" clearable />
          </el-form-item>
          <el-form-item label="工单状态" prop="status">
            <el-input v-model="queryParams.status" placeholder="请输入" clearable />
          </el-form-item>
          <el-form-item label="录入时间" prop="userName">
            <el-input v-model="queryParams.userName" placeholder="请输入" clearable />
          </el-form-item>

          <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </template>
      <template #table>
        <el-table v-loading="loading" :data="list" height="100%" :header-cell-style="proxy.getTableHeaderStyle"
          :cell-style="proxy.getTablerowStyle">
          <!-- <el-table-column type="selection" width="50" align="center" /> -->
          <el-table-column label="工单地址" align="center" key="address" prop="address" />
          <el-table-column label="工单类型" align="center" key="gdType" prop="gdType">
            <template #default="scope">
              <dict-tag :options="gdlx" :value="scope.row.gdType" />
            </template>
          </el-table-column>
          <el-table-column label="工单等级" align="center" key="gdLevel" prop="gdLevel" />
          <el-table-column label="录入时间" align="center" key="createTime" prop="createTime" />
          <el-table-column label="工单状态" align="center" key="status" prop="status">
            <template #default="scope">
              <dict-tag :options="gd_status" :value="scope.row.status" />
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="400" class-name="small-padding fixed-width ">
            <template #default="scope">
              <div class="table-operation-row">
                <section v-show="scope.row.status == 0">
                  <el-button link type="primary" icon="FolderAdd">勘察录入</el-button>
                  <el-button link type="primary" icon="FolderRemove">退单</el-button>
                </section>
                <section v-show="scope.row.status == 1">
                  <el-button link type="primary" icon="User">派发</el-button>
                  <el-button link type="primary" icon="Edit">编辑</el-button>
                </section>
                <section v-show="scope.row.status == 4">
                  <el-button link type="primary" icon="ChatRound">处理反馈</el-button>
                  <el-button link type="primary" icon="Bell">消息催办</el-button>
                  <el-button link type="primary" icon="Switch">转派</el-button>
                </section>
                <section>
                  <el-button link type="primary" icon="View">查看</el-button>
                <el-button link type="primary" icon="Delete"
                  v-show="scope.row.status != 0 && scope.row.status != 3">删除</el-button>
                </section>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <template #pagination>
        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.current"
          v-model:limit="queryParams.size" @pagination="getList" />
      </template>
    </tablePage>
    <!-- 工单 -->
    <operation v-model="open" :title="title" @confirm="getList()"></operation>
  </section>
</template>

<script setup>
import { operation } from "./index";
import { getyjList } from "@/api/emergency-rescue";
import { onMounted } from "vue";
const { proxy } = getCurrentInstance();
const { gdlx, gd_status } = proxy.useDict("gdlx", "gd_status");

const loading = ref(false);
const list = ref([]);
const open = ref(false);
const title = ref("");
const total = ref(0);
const router = useRouter();
const data = reactive({
  form: {},
  queryParams: {
    gdms: undefined,
    gdType: undefined,
    gdLevel: undefined,
    status: undefined,
    current: 1,
    size: 10,
  },
  rules: {},
});

const { queryParams, form, rules } = toRefs(data);

onMounted(() => {
  getList();
});

/**
 * 获取列表数据
 */
const getList = async () => {
  loading.value = true;
  const res = await getyjList(queryParams.value);
  loading.value = false;
  list.value = res.data.records;
  total.value = res.data.total;
};

/**
 * 搜索
 */
const handleQuery = () => {
  queryParams.value.pageNum = 1;
};

/**
 * 重置查询条件
 */
const resetQuery = () => {
  proxy.resetForm("queryRef");
  handleQuery();
};

/**
 * 新增
 */
const handlerAdd = () => {
  open.value = true;
  title.value = "抢险工单录入";
};
/**
 * 导出
 */
const handlerExport = () => { };

const handlerInfo = () => {
  proxy.setActiveMenu();
  router.push({ path: "/emergency-rescue/workInfo-info" });
};
</script>

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