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>