deepdragon/src/admin/views/renovation/siteIndex/index.vue

<template>
  <div class="app-container">
    <transition name="fade">
      <el-row :gutter="20" v-if="!showDetail">
        <el-form
          :model="queryParams"
          ref="queryForm"
          :inline="true"
          v-show="showSearch"
          label-width="68px"
        >
          <el-form-item label="方案名称" prop="layerName">
            <el-input
              v-model="queryParams.planName"
              placeholder="请输入方案"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="创建人" prop="layerName">
            <el-input
              v-model="queryParams.createBy"
              placeholder="请输入创建人"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <!-- <el-form-item label="状态" prop="layerName">
            <el-input
              v-model="queryParams.createBy"
              placeholder=""
              clearable
              @keyup.enter.native="handleQuery"
            />
          </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>

        <el-table
          v-loading="loading"
          :data="dataList"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column
            label="档案编号"
            align="center"
            prop="planId"
            width="150"
          />
          <el-table-column label="方档案名称" align="center" prop="planName" />
          <el-table-column label="创建人" align="center" prop="createBy" />

          <el-table-column label="创建时间" align="center" prop="createTime" />

          <el-table-column label="状态" align="center" prop="createBy">
            <template #default="scope">
              <div>
                <el-tag  :type="planStatus[scope.row.reviewStatus]?.type"
                  >{{planStatus[scope.row.reviewStatus]?.label}}</el-tag
                >
              </div>
            </template>
          </el-table-column>

          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
          >
            <template #default="scope">
              <el-button
                link
                type="primary"
                icon="Edit"
                v-hasPermi="['renovation:siteIndex:apply']"
              @click="handleOpen(scope.row)"
                >审核</el-button
              >
              <!-- <el-button
                link
                type="primary"
                icon="Edit"

                >导出excel</el-button
              >
              <el-button
                link
                type="primary"
                icon="Edit"

                >导出world</el-button
              > -->
              <el-button
                link
                type="danger"
                icon="Delete"
                @click="handleDelete(scope.row)"
                v-hasPermi="['system:porfiles:remove']"
                >删除</el-button
              >
              <el-dropdown style="margin: 2px 7px;"  v-hasPermi="['renovation:siteIndex:apply']">
                <el-button type="primary"        link>
                  导出<el-icon class="el-icon--right"><arrow-down /></el-icon>
                </el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item    @click="handleExcel(scope.row)">导出excel</el-dropdown-item>
                    <el-dropdown-item    @click="handleWorld(scope.row)">导出world</el-dropdown-item>

                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="total > 0"
          :total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="getList"
        />
      </el-row>
    </transition>

    <transition name="detail">
      <detailCom v-if="showDetail"  :arrSite="arrSite" :planData = "planData">
        <el-button

          type="primary"
          icon="ArrowLeft"
          style="margin-bottom: 10px"
          @click="backCall"
          >返回</el-button
        >
      </detailCom>
    </transition>
  </div>
</template>

<script setup name="porfiles">
import { list,devices,excel } from "@/api/system/siteplan";
import {planStatus} from './dist.js'
import detailCom from "./detail";

const { proxy } = getCurrentInstance();
const showDetail = ref(false);
const backCall = () => {
  if (!document.startViewTransition) {
    showDetail.value = false;
    return;
  }
  document.startViewTransition(() => (showDetail.value = false));
  getList()
  // showDetail.value = false
};
const data = reactive({
  // 按钮loading
  buttonLoading: false,
  // 遮罩层
  loading: false,
  // 选中数组
  ids: [],
  // 非单个禁用
  single: true,
  // 非多个禁用
  multiple: true,
  // 显示搜索条件
  showSearch: true,
  // 总条数
  total: 0,
  // 图层管理表格数据
  dataList: [

  ],

  title: "",
  // 是否显示弹出层
  open: false,
  // 查询参数
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    createBy: undefined,
    layersId: undefined,
  },
  // 表单参数
  form: {},
  // 表单校验
});
const input = ref("");
const {
  open,
  showSearch,
  queryParams,
  form,
  ids,
  title,
  dataList,
  total,
  multiple,
  single,
  loading,
  planList,
  buttonLoading,
} = toRefs(data);
const planDialog = ref("");
const applyDialog = ref(false);
const layerName = ref();

const filterMethod = (query, item) => {
  return item.initial.toLowerCase().includes(query.toLowerCase());
};
const handleExcel = ( item) => {
  excel(item.planId)
  proxy.download("/renovationPlan/export/excel", {
   planId:item.planId
  }, `${item.planName}.xlsx`,{
    baseURL: "/plan-api"
  });
}
const handleWorld = ( item) => {
  excel(item.planId)
  proxy.download("/renovationPlan/export/word", {
   planId:item.planId
  }, `${item.planName}.docx`,{
    baseURL: "/plan-api"
  });
}

//详情
const arrSite = ref([])
const planData = ref({})
async function handleOpen(row) {
  let res = await devices({planId:row.planId});
  planData.value =row
  arrSite.value = res.data
  showDetail.value = true;
  applyDialog.value = true;
}

function handleSelectionChange(selection) {
  ids.value = selection.map((item) => item.id);
  single.value = selection.length !== 1;
  multiple.value = !selection.length;
}
/** 查询理列表 */
function getList() {
  //  loading.value = false;
  loading.value = true;
  list(queryParams.value).then((response) => {
    response = response.data;
    dataList.value = response.items;
    total.value = response.total;
    loading.value = false;
  });
}
/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}
/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryForm");
  handleQuery();
}

getList();
</script>
<style lang="scss" scoped>
.fade-enter-active {
  transition: all 0.3s ease-out;
}
.fade-leave-active {
  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}
.fade-enter-from,
.fade-leave-to {
  transform: translateX(-120px);
  opacity: 0;
}

.detail-enter-active,
.detail-leave-active {
  transition: opacity 0.5s ease;
}
.detail-enter-from,
.detail-leave-to {
  opacity: 0;
}
</style>