合并

Your Name

2022-09-08 5a1616f169d75ece07d2d12a8edac3e5f660a920

 src/views/accidentManagementSystem/accidentCases/index.vue

@@ -1,261 +1,274 @@
<!--<template>-->
<!--   <div>-->
<!--      <el-form :model="ruleForm" status-icon label-width="20px" class="topTitle">-->
<!--         <el-row>-->
<!--            <el-col :span="4">-->
<!--               <el-form-item>-->
<!--                  <el-input v-model="ruleForm.searchParams.caseTitle" size="default" placeholder="请输入关键词" />-->
<!--               </el-form-item>-->
<!--            </el-col>-->
<!--            &lt;!&ndash; <el-col :span="4">-->
<!--               <el-form-item>-->
<!--                  <el-input v-model="ruleForm.searchParams.indexNum" size="default" placeholder="目标指标编号" />-->
<!--               </el-form-item>-->
<!--            </el-col> &ndash;&gt;-->
<!--            <el-col :span="16">-->
<!--               <el-form-item>-->
<!--                  <el-button type="primary" size="default" @click="listApi">查询</el-button>-->
<!--                  <el-button size="default" @click="resetForm">重置</el-button>-->
<!--               </el-form-item>-->
<!--            </el-col>-->
<!--         </el-row>-->
<!--      </el-form>-->
<!--      <div class="minCenter">-->
<!--         <div class="btns">-->
<!--            <div>-->
<!--               <el-button size="default" type="primary" :icon="Plus" @click="openD('新建')">新建</el-button>-->
<!--               &lt;!&ndash; <el-button size="default" type="warning" :disabled="warning" :icon="EditPen" plain @click="openD('修改', deletAll[0])">修改</el-button> &ndash;&gt;-->
<!--               <el-button size="default" type="danger" :disabled="danger" :icon="Delete" plain @click="onDeleteAll">删除</el-button>-->
<!--            </div>-->
<!--         </div>-->
<!--         <el-table ref="multipleTableRef" :data="tableData" @selection-change="handleSelectionChange" style="width: 100%">-->
<!--            <el-table-column type="selection" align="center" width="55" />-->
<!--            <el-table-column label="序号" align="center" type="index" width="70" />-->
<!--            <el-table-column label="标题" align="center" property="caseTitle" sortable />-->
<!--            <el-table-column property="caseTime" align="center" label="发布时间" sortable />-->
<!--            &lt;!&ndash; <el-table-column property="year" label="年度" align="center" sortable show-overflow-tooltip />-->
<!--            <el-table-column property="value" label="指标值" align="center" sortable show-overflow-tooltip /> &ndash;&gt;-->
<!--            <el-table-column label="操作" align="center" sortable show-overflow-tooltip>-->
<!--               <template #default="scope">-->
<!--                  &lt;!&ndash; <el-button link type="primary" size="small" :icon="View" @click="openD('查看', scope.row.id)">查看</el-button> &ndash;&gt;-->
<!--                  <el-button link type="primary" size="small" :icon="EditPen" @click="openD('修改', scope.row.id)">编辑</el-button>-->
<!--                  <el-button link type="primary" size="small" :icon="Delete" @click="onDelete(scope.row.id)">删除</el-button>-->
<!--               </template>-->
<!--            </el-table-column>-->
<!--         </el-table>-->
<!--         <div class="pages">-->
<!--            <el-pagination-->
<!--               v-model:currentPage="currentPage4"-->
<!--               v-model:page-size="pageSize4"-->
<!--               :page-sizes="[10, 20, 30, 40]"-->
<!--               layout="total, sizes, prev, pager, next, jumper"-->
<!--               :total="total"-->
<!--               @size-change="handleSizeChange"-->
<!--               @current-change="handleCurrentChange"-->
<!--            />-->
<!--         </div>-->
<!--      </div>-->
<!--      <DailogCases ref="Show" @onAdd="add"></DailogCases>-->
<!--   </div>-->
<!--</template>-->
<!--<script lang="ts">-->
<!--import DailogCases from './component/DailogCases.vue';-->
<!--import { ref, toRefs, reactive, onMounted, defineComponent } from 'vue';-->
<!--import { ElMessageBox, ElMessage, ElButton, ElInput, TabsPaneContext, FormInstance } from 'element-plus';-->
<!--import { Plus, Delete, Upload, Download, Refresh, View, EditPen } from '@element-plus/icons-vue';-->
<!--import { accidentManagementSystemApi } from '/@/api/accidentManagementSystem';-->
<!--export default defineComponent({-->
<!--   components: { ElButton, ElInput,DailogCases },-->
<!--   setup() {-->
<!--      // 搜索条件-->
<!--      const ruleForm = reactive({-->
<!--         pageSize: 10,-->
<!--         pageIndex: 1,-->
<!--         searchParams: {-->
<!--            caseTitle: '',-->
<!--         },-->
<!--      });-->
<!--      // 下方导航与表格-->
<!--      const tableData = ref([]);-->
<!--      const currentPage4 = ref();-->
<!--      const pageSize4 = ref();-->
<!--      const total = ref();-->
<!--      const resetForm = () => {-->
<!--         ruleForm.searchParams.caseTitle = '';-->
<!--         listApi();-->
<!--      };-->
<!--      const listApi = () => {-->
<!--         accidentManagementSystemApi()-->
<!--            .getaccidentCaseList(ruleForm)-->
<!--            .then((res) => {-->
<!--               if (res.data.code == 200) {-->
<!--                  tableData.value = res.data.data;-->
<!--                  currentPage4.value = res.data.pageIndex;-->
<!--                  pageSize4.value = res.data.pageSize;-->
<!--                  total.value = res.data.total;-->
<!--               } else {-->
<!--                  ElMessage.error(res.data.msg);-->
<!--               }-->
<!--            });-->
<!--      };-->
<!--      onMounted(() => {-->
<!--         listApi();-->
<!--      });-->
<template>
   <div>
      <el-form :model="ruleForm" status-icon label-width="20px" class="topTitle">
         <el-row>
            <el-col :span="4">
               <el-form-item>
                  <el-input v-model="ruleForm.searchParams.caseTitle" size="default" placeholder="请输入关键词" />
               </el-form-item>
            </el-col>
            <!-- <el-col :span="4">
               <el-form-item>
                  <el-input v-model="ruleForm.searchParams.indexNum" size="default" placeholder="目标指标编号" />
               </el-form-item>
            </el-col> -->
            <el-col :span="16">
               <el-form-item>
                  <el-button type="primary" size="default" @click="listApi">查询</el-button>
                  <el-button size="default" @click="resetForm">重置</el-button>
               </el-form-item>
            </el-col>
         </el-row>
      </el-form>
      <div class="minCenter">
         <div class="btns">
            <div>
               <el-button size="default" type="primary" :icon="Plus" @click="openD('新建')">新建</el-button>
               <!-- <el-button size="default" type="warning" :disabled="warning" :icon="EditPen" plain @click="openD('修改', deletAll[0])">修改</el-button> -->
               <el-button size="default" type="danger" :disabled="danger" :icon="Delete" plain @click="onDeleteAll">删除</el-button>
            </div>
         </div>
         <el-table ref="multipleTableRef" :data="tableData" @selection-change="handleSelectionChange" style="width: 100%">
            <el-table-column type="selection" align="center" width="55" />
            <el-table-column label="序号" align="center" type="index" width="70" />
            <el-table-column label="标题" align="center" property="caseTitle" sortable />
            <el-table-column property="caseTime" align="center" label="发布时间" sortable />
            <!-- <el-table-column property="year" label="年度" align="center" sortable show-overflow-tooltip />
            <el-table-column property="value" label="指标值" align="center" sortable show-overflow-tooltip /> -->
            <el-table-column label="操作" align="center" sortable show-overflow-tooltip>
               <template #default="scope">
                  <el-button link type="primary" size="small" :icon="View" @click="jump(scope.row.id)">查看</el-button>
                  <el-button link type="primary" size="small" :icon="EditPen" @click="openD('修改', scope.row.id)">编辑</el-button>
                  <el-button link type="primary" size="small" :icon="Delete" @click="onDelete(scope.row.id)">删除</el-button>
               </template>
            </el-table-column>
         </el-table>
         <div class="pages">
            <el-pagination
               v-model:currentPage="currentPage4"
               v-model:page-size="pageSize4"
               :page-sizes="[10, 20, 30, 40]"
               layout="total, sizes, prev, pager, next, jumper"
               :total="total"
               @size-change="handleSizeChange"
               @current-change="handleCurrentChange"
            />
         </div>
      </div>
      <DailogCases ref="Show" @onAdd="add"></DailogCases>
   </div>
</template>
<script lang="ts">
import DailogCases from './component/DailogCases.vue';
import { ref, toRefs, reactive, onMounted, defineComponent } from 'vue';
import { ElMessageBox, ElMessage, ElButton, ElInput, TabsPaneContext, FormInstance } from 'element-plus';
import { Plus, Delete, Upload, Download, Refresh, View, EditPen } from '@element-plus/icons-vue';
import { accidentManagementSystemApi } from '/@/api/accidentManagementSystem';
import { useRouter } from 'vue-router';
export default defineComponent({
   components: { ElButton, ElInput, DailogCases },
   setup() {
      // 搜索条件
      const ruleForm = reactive({
         pageSize: 10,
         pageIndex: 1,
         searchParams: {
            caseTitle: '',
         },
      });
      // 下方导航与表格
      const tableData = ref([]);
      const currentPage4 = ref();
      const pageSize4 = ref();
      const total = ref();
      const resetForm = () => {
         ruleForm.searchParams.caseTitle = '';
         listApi();
      };
      const listApi = () => {
         accidentManagementSystemApi()
            .getaccidentCaseList(ruleForm)
            .then((res) => {
               if (res.data.code == 200) {
                  tableData.value = res.data.data;
                  currentPage4.value = res.data.pageIndex;
                  pageSize4.value = res.data.pageSize;
                  total.value = res.data.total;
               } else {
                  ElMessage.error(res.data.msg);
               }
            });
      };
      onMounted(() => {
         listApi();
      });

<!--      const handleSizeChange = (val: number) => {-->
<!--         // console.log(`${val} items per page`);-->
<!--         ruleForm.pageSize = val;-->
<!--         listApi();-->
<!--      };-->
<!--      const handleCurrentChange = (val: number) => {-->
<!--         // console.log(`current page: ${val}`);-->
<!--         ruleForm.pageIndex = val;-->
<!--         listApi();-->
<!--      };-->
<!--      const activeNames = ref('1');-->
<!--      // 打开弹窗-->
<!--      const Show = ref();-->
<!--      const openD = (title: String, id: number) => {-->
<!--         Show.value.openDailog(title,id);-->
<!--      };-->
<!--      // 删除-->
<!--      const onDelete = (id: number) => {-->
<!--         let arr = [];-->
<!--         arr.push(id);-->
<!--         ElMessageBox.confirm('确定删除所选项吗?', 'Warning', {-->
<!--            confirmButtonText: '确定',-->
<!--            cancelButtonText: '取消',-->
<!--            type: 'warning',-->
<!--         })-->
<!--            .then(() => {-->
<!--                    console.log(arr)-->
<!--               accidentManagementSystemApi()-->
<!--                  .getaccidentCaseDelete(arr)-->
<!--                  .then((res) => {-->
<!--                     if (res.data.code == 200) {-->
<!--                        ElMessage({-->
<!--                           message: res.data.msg,-->
<!--                           type: 'success',-->
<!--                        });-->
<!--                        listApi();-->
<!--                     } else {-->
<!--                        ElMessage.error(res.data.msg);-->
<!--                     }-->
<!--                  });-->
<!--            })-->
<!--            .catch(() => {-->
<!--               // ElMessage({-->
<!--               //    type: 'info',-->
<!--               //    message: 'Delete canceled',-->
<!--               // });-->
<!--            });-->
<!--      };-->
<!--      // 批量删除-->
<!--      const warning = ref(true);-->
<!--      const danger = ref(true);-->
<!--      const deletAll = ref();-->
<!--      const handleSelectionChange = (val: any) => {-->
<!--         let valId = JSON.parse(JSON.stringify(val));-->
<!--         let arr = [];-->
<!--         for (let i = 0; i < valId.length; i++) {-->
<!--            arr.push(valId[i].id);-->
<!--         }-->
<!--         deletAll.value = arr;-->
<!--         if (val.length == 1) {-->
<!--            warning.value = false;-->
<!--            danger.value = false;-->
<!--         } else if (val.length == 0) {-->
<!--            warning.value = true;-->
<!--            danger.value = true;-->
<!--         } else {-->
<!--            warning.value = true;-->
<!--            danger.value = false;-->
<!--         }-->
<!--      };-->
<!--      const onDeleteAll = () => {-->
<!--         ElMessageBox.confirm('确定删除所选项吗?', 'Warning', {-->
<!--            confirmButtonText: '确定',-->
<!--            cancelButtonText: '取消',-->
<!--            type: 'warning',-->
<!--         })-->
<!--            .then(() => {-->
<!--               accidentManagementSystemApi()-->
<!--                  .getaccidentCaseDelete(deletAll.value)-->
<!--                  .then((res) => {-->
<!--                     if (res.data.code == 200) {-->
<!--                        ElMessage({-->
<!--                           message: res.data.msg,-->
<!--                           type: 'success',-->
<!--                        });-->
<!--                        listApi();-->
<!--                     } else {-->
<!--                        ElMessage.error(res.data.msg);-->
<!--                     }-->
<!--                  });-->
<!--            })-->
<!--            .catch(() => {-->
<!--               ElMessage({-->
<!--                  type: 'info',-->
<!--                  message: 'Delete canceled',-->
<!--               });-->
<!--            });-->
<!--      };-->
<!--      const add = () => {-->
<!--         listApi();-->
<!--      };-->
<!--      return {-->
<!--         listApi,-->
<!--         add,-->
<!--         resetForm,-->
<!--         tableData,-->
<!--         currentPage4,-->
<!--         pageSize4,-->
<!--         total,-->
<!--         ruleForm,-->
<!--         handleSizeChange,-->
<!--         handleCurrentChange,-->
<!--         Show,-->
<!--         openD,-->
<!--         activeNames,-->
<!--         onDelete,-->
<!--         warning,-->
<!--         danger,-->
<!--         deletAll,-->
<!--         handleSelectionChange,-->
<!--         onDeleteAll,-->
<!--         Plus,-->
<!--         Delete,-->
<!--         Upload,-->
<!--         Download,-->
<!--         Refresh,-->
<!--         View,-->
<!--         EditPen,-->
<!--      };-->
<!--   },-->
<!--});-->
<!--</script>-->
<!--<style scoped>-->
<!--.topTitle {-->
<!--   background-color: #fff;-->
<!--   padding: 20px 0px 20px 0px;-->
<!--}-->
<!--.minCenter {-->
<!--   width: 100%;-->
<!--   background-color: #fff;-->
<!--   margin-top: 10px;-->
<!--   padding: 0 20px;-->
<!--}-->
<!--.btns {-->
<!--   padding: 20px 0px 10px 0px;-->
<!--   display: flex;-->
<!--   justify-content: space-between;-->
<!--}-->
<!--.pages {-->
<!--   padding: 20px 0;-->
<!--   display: flex;-->
<!--   justify-content: right;-->
<!--}-->
<!--.tableC {-->
<!--   margin: 0 10%;-->
<!--}-->
<!--</style>-->
      const handleSizeChange = (val: number) => {
         // console.log(`${val} items per page`);
         ruleForm.pageSize = val;
         listApi();
      };
      const handleCurrentChange = (val: number) => {
         // console.log(`current page: ${val}`);
         ruleForm.pageIndex = val;
         listApi();
      };
      const activeNames = ref('1');
      // 打开弹窗
      const Show = ref();
      const openD = (title: String, id: number) => {
         Show.value.openDailog(title, id);
      };
      // 删除
      const onDelete = (id: number) => {
         let arr = [];
         arr.push(id);
         ElMessageBox.confirm('确定删除所选项吗?', 'Warning', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
         })
            .then(() => {
               console.log(arr);
               accidentManagementSystemApi()
                  .getaccidentCaseDelete(arr)
                  .then((res) => {
                     if (res.data.code == 200) {
                        ElMessage({
                           message: res.data.msg,
                           type: 'success',
                        });
                        listApi();
                     } else {
                        ElMessage.error(res.data.msg);
                     }
                  });
            })
            .catch(() => {
               // ElMessage({
               //    type: 'info',
               //    message: 'Delete canceled',
               // });
            });
      };
      // 批量删除
      const warning = ref(true);
      const danger = ref(true);
      const deletAll = ref();
      const handleSelectionChange = (val: any) => {
         let valId = JSON.parse(JSON.stringify(val));
         let arr = [];
         for (let i = 0; i < valId.length; i++) {
            arr.push(valId[i].id);
         }
         deletAll.value = arr;
         if (val.length == 1) {
            warning.value = false;
            danger.value = false;
         } else if (val.length == 0) {
            warning.value = true;
            danger.value = true;
         } else {
            warning.value = true;
            danger.value = false;
         }
      };
      const onDeleteAll = () => {
         ElMessageBox.confirm('确定删除所选项吗?', 'Warning', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
         })
            .then(() => {
               accidentManagementSystemApi()
                  .getaccidentCaseDelete(deletAll.value)
                  .then((res) => {
                     if (res.data.code == 200) {
                        ElMessage({
                           message: res.data.msg,
                           type: 'success',
                        });
                        listApi();
                     } else {
                        ElMessage.error(res.data.msg);
                     }
                  });
            })
            .catch(() => {
               ElMessage({
                  type: 'info',
                  message: 'Delete canceled',
               });
            });
      };
      const add = () => {
         listApi();
      };
      let router = useRouter();
      let jump = (id:any) => {
         router.push({ 
            path: '/accidentCasesCop' ,
            query:{
               id:id,
            }
         });
      };

      return {
         jump,
         router,
         listApi,
         add,
         resetForm,
         tableData,
         currentPage4,
         pageSize4,
         total,
         ruleForm,
         handleSizeChange,
         handleCurrentChange,
         Show,
         openD,
         activeNames,
         onDelete,
         warning,
         danger,
         deletAll,
         handleSelectionChange,
         onDeleteAll,
         Plus,
         Delete,
         Upload,
         Download,
         Refresh,
         View,
         EditPen,
      };
   },
});
</script>
<style scoped>
.topTitle {
   background-color: #fff;
   padding: 20px 0px 20px 0px;
}
.minCenter {
   width: 100%;
   background-color: #fff;
   margin-top: 10px;
   padding: 0 20px;
}
.btns {
   padding: 20px 0px 10px 0px;
   display: flex;
   justify-content: space-between;
}
.pages {
   padding: 20px 0;
   display: flex;
   justify-content: right;
}
.tableC {
   margin: 0 10%;
}
</style>