数据对接

13937891274

2022-08-04 44dae1108f8bc7134fbbc39a09c581bf3c4e0bb2

 src/views/contingencyManagement/panManagement/component/abolishLibrary.vue

@@ -3,71 +3,46 @@
    <el-dialog
        title="废止库"
        v-model="isShowDialog"
        width="769px"
        width="60%"
        draggable
        :fullscreen="full"
    >
      <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
      <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          size="default"
          :rules="rules"
          label-width="120px"
      >
        <el-row :gutter="35">
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                <el-table
                    :data="tableData"
                    style="width: 100%;margin-top: 15px;"
                    ref="multipleTableRef"
                    :model="formInline"
                    :header-cell-style="{background:'#f6f7fa',color:'#909399'}"
                >
                  <el-table-column prop="jobNo" label="预案名称" show-overflow-tooltip sortable></el-table-column>
                  <el-table-column prop="personnelName" label="预案类型" show-overflow-tooltip sortable></el-table-column>
                  <el-table-column prop="phone" label="编写人" show-overflow-tooltip sortable></el-table-column>
                  <el-table-column prop="position" label="发布实施日期" show-overflow-tooltip sortable></el-table-column>
                  <el-table-column label="操作" width="200" align="center">
                    <template #default="scope">
                      <el-button disabled size="small" text="plain" >查看
                      </el-button>
                      <el-button disabled size="small" text="plain" style="margin-right: 5px;">编辑
                      </el-button>
                      <el-button disabled size="small" text="plain" style="margin-right: 5px;">删除
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
          </el-col>
        </el-row>
      </el-form>
      <el-row :gutter="35">
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
          <el-table
              :data="tableData"
              style="width: 100%;margin-top: 15px;"
              ref="multipleTableRef"
              :model="formInline"
              :header-cell-style="{background:'#f6f7fa',color:'#909399'}"
          >
            <el-table-column prop="name" label="预案名称" show-overflow-tooltip sortable></el-table-column>
            <el-table-column prop="type" label="预案类型" show-overflow-tooltip sortable></el-table-column>
            <el-table-column prop="authorUid" label="编写人" show-overflow-tooltip sortable></el-table-column>
            <el-table-column prop="releaseDate" label="发布实施日期" show-overflow-tooltip sortable></el-table-column>
            <el-table-column label="操作" width="200" align="center">
              <template #default="scope">
                <el-button size="small" text type="primary" @click="onReduction(scope.row.id)">还原
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <div class="pages">
<!--      <el-pagination-->
<!--          @size-change="onHandleSizeChange"-->
<!--          @current-change="onHandleCurrentChange"-->
<!--          class="mt15"-->
<!--          :pager-count="5"-->
<!--          :page-sizes="[10, 20, 30]"-->
<!--          v-model:current-page="formInline.pageIndex"-->
<!--          background-->
<!--          v-model:page-size="formInline.pageSize"-->
<!--          layout="total, sizes, prev, pager, next, jumper"-->
<!--          :total="tableData.total"-->
<!--      >-->
<!--      </el-pagination>-->
        <el-pagination
            v-if="tableData.length == 0 ? false : true"
            v-model:currentPage="pageIndex"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 30]"
            :pager-count="5"
            :small="small"
            :disabled="disabled"
            :background="background"
            class="mt15"
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="40"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :total="total"
            @size-change="onHandleSizeChange"
            @current-change="onHandleCurrentChange"
        />
      </div>
      <template #footer>
@@ -89,41 +64,57 @@
import type {
  FormInstance,
} from 'element-plus'

import {
  // ElMessageBox,
  ElMessage,
} from 'element-plus';
import {
  Search,
  FullScreen
} from '@element-plus/icons-vue'
// 定义表格数据类型
interface User {
  personnelName: string
  jobNo: string
  phone: string;
  position: string;
}
// 定义表单搜索
const formInline = reactive({
  pageIndex: 1,
  pageSize: 10,
  searchParams: {
    teamName: "",
    teamType: "",
  }
})
import {emergencyPlanApi} from "/@/api/emergencyPlan";
export default defineComponent({
  name: 'abolishLibrary',
  components: {

  },
  setup() {
  setup(prop, {emit}) {
    // 列表参数
    const listQuery = reactive({
      pageIndex: 1,
      pageSize: 10,
      searchParams: {
        abolishStatus: true,
      }
    })
    // 定义表格数据
    const tableData = ref([]);

    // 列表数据请求
    const openDialog = async () => {
      isShowDialog.value = true;
      let res = await emergencyPlanApi().getEmergencyPlanList(listQuery)
      if(res.data.code === '200'){
        tableData.value = res.data.data;
        pageIndex.value = res.data.pageIndex;
        pageSize.value = res.data.pageSize;
        total.value = res.data.total;
      }else{
        ElMessage({
          showClose: true,
          type:'error',
          message:res.data.msg
        })
      }
    }

    const isShowDialog = ref(false)

    const ruleFormRef = ref<FormInstance>()
    // 打开弹窗
    const openDialog = () => {
      // state.ruleForm = row;
      isShowDialog.value = true;
    };
    // const openDialog = () => {
    //   isShowDialog.value = true;
    // };
    // 关闭弹窗
    const closeDialog = () => {
      isShowDialog.value = false;
@@ -132,30 +123,17 @@
    const onCancel = () => {
      closeDialog();
    };
    // 打开用户选择弹窗
    const userRef = ref();
    const openUser = () => {
      userRef.value.openDialog();
    };
    // 分页改变
    // const onHandleSizeChange = (val: number) => {
    //   formInline.pageSize = val;
    // };
    // const onHandleCurrentChange = (val: number) => {
    //   formInline.pageIndex = val;
    // };
    //定义表格数据
    const multipleSelection = ref<User[]>([])
    const tableData: User[] = []

    // 分页
    const pageIndex = ref(4);
    const pageSize = ref(10);
    const pageIndex = ref();
    const pageSize = ref();
    const total = ref();
    // 分页改变
    const handleSizeChange = (val: number) => {
      console.log(`${val} items per page`);
      listQuery.pageSize = val;
    };
    // 分页未改变
    const handleCurrentChange = (val: number) => {
      console.log(`current page: ${val}`);
      listQuery.pageIndex = val;
    };
    //全屏
    const full = ref(false);
@@ -172,15 +150,8 @@
      isShowDialog,
      onCancel,
      tableData,
      multipleSelection,
      Search,
      ruleFormRef,
      // submitForm,
      userRef,
      openUser,
      // onHandleSizeChange,
      // onHandleCurrentChange,
      formInline,
      pageIndex,
      pageSize,
      handleSizeChange,
@@ -188,6 +159,10 @@
      toggleFullscreen,
      FullScreen,
      full,
      listQuery,
      // onSubmit,
      total,
      emit,
    };
  },
});