对接

shj

2022-09-06 d1a430e88df40d76558a14f890ac0dbd3181f3a0

 src/views/facilityManagement/deviceType/index.vue

@@ -1,96 +1,130 @@
<template>
    <div class="box">
        <el-button type="primary" :icon="Plus" @click="openD">新建</el-button>
         <el-table :data="tableData" style="width: 100%"  row-key="id">
    <el-table-column align="center" prop="date" label="是否为设备内容"/>
    <el-table-column align="center" prop="name" label="巡检" />
    <el-table-column align="center" prop="address" label="检测" />
    <el-table-column align="center" prop="address" label="类别名称" />
    <el-table-column align="center" label="操作">
        <template #default>
         <el-button type="primary" link :icon="View">查看</el-button>
         <el-button type="primary" link :icon="EditPen">修改</el-button>
         <el-button type="primary" link :icon="Delete">删除</el-button>
         <el-button type="primary" link :icon="CirclePlus">添加下级设备设施类型管理</el-button>
        </template>
    </el-table-column>
  </el-table>
   <Dailog ref="Show"></Dailog>
    </div>
   <div class="box">
      <el-button type="primary" :icon="Plus" @click="openD('新建', 0)" size="default">新建</el-button>
      <el-table :data="tableData" style="width: 100%" row-key="id" :tree-props="propse">
         <el-table-column align="center" label="是否为设备内容">
            <template #default="scope">
               <span v-if="scope.row.isContent == 1">是</span>
               <span v-if="scope.row.isContent == 2">否</span>
            </template>
         </el-table-column>
         <el-table-column align="center" label="巡检">
            <template #default="scope">
               <span v-if="scope.row.isVisit == 0">-</span>
               <span v-if="scope.row.isVisit == 1">是</span>
               <span v-if="scope.row.isVisit == 2">否</span>
            </template>
         </el-table-column>
         <el-table-column align="center" label="检测">
            <template #default="scope">
               <span v-if="scope.row.isCheck == 0">-</span>
               <span v-if="scope.row.isCheck == 1">是</span>
               <span v-if="scope.row.isCheck == 2">否</span>
            </template>
         </el-table-column>
         <el-table-column align="center" prop="typeName" label="类别名称" />
         <el-table-column align="center" label="操作">
            <template #default="scope">
               <el-button type="primary" link :icon="View" @click="openD('查看', scope.row.id)">查看</el-button>
               <el-button type="primary" link :icon="EditPen" @click="openD('修改', scope.row.id)">修改</el-button>
               <el-button type="primary" link :icon="Delete" @click="Deletes(scope.row.id)">删除</el-button>
               <el-button type="primary" link :icon="CirclePlus" @click="openD('添加', scope.row.id)">添加下级设备设施类型管理</el-button>
            </template>
         </el-table-column>
      </el-table>
      <Dailog ref="Show" @onAdd="add"></Dailog>
   </div>
</template>
<script lang="ts">
import { defineComponent,ref } from 'vue'
import {Plus,View,EditPen,Delete,CirclePlus} from '@element-plus/icons-vue'
import Dailog from "./component/Dailog.vue"
import { defineComponent, onMounted, ref } from 'vue';
import { Plus, View, EditPen, Delete, CirclePlus } from '@element-plus/icons-vue';
import Dailog from './component/Dailog.vue';
import { facilityManagementApi } from '/@/api/facilityManagement';
import { ElMessage,ElMessageBox } from 'element-plus';
export default defineComponent({
    components:{Dailog},
    setup() {
      const tableData = [
  {
    id: 1,
    date: '2016-05-02',
    name: 'wangxiaohu',
  },
  {
    id: 2,
    date: '2016-05-04',
    name: 'wangxiaohu',
  },
  {
    id: 3,
    date: '2016-05-01',
    name: 'wangxiaohu',
    children: [
      {
        id: 31,
        date: '2016-05-01',
        name: 'wangxiaohu',
         children: [
      {
        id: 35,
        date: '2016-05-01',
        name: 'wangxiaohu',
      },
      {
        id: 36,
        date: '2016-05-01',
        name: 'wangxiaohu',
      },
    ],
      },
      {
        id: 32,
        date: '2016-05-01',
        name: 'wangxiaohu',
      },
    ],
  },
  {
    id: 4,
    date: '2016-05-03',
    name: 'wangxiaohu',
  },
]
    const Show=ref()
    const openD=()=>{
        Show.value.openDailog()
    }
       return{
           tableData,
           Show,
           openD,
           Plus,
           View,
           EditPen,
           Delete,
           CirclePlus
       } 
    },
})
   components: { Dailog },
   setup() {
      // 列表
      const listApi = () => {
         facilityManagementApi()
            .getequipmentTypeMngTreeData()
            .then((res) => {
               if (res.data.code == 200) {
                  tableData.value = res.data.data;
               } else {
                  ElMessage({
                     showClose: true,
                     message: res.data.msg,
                     type: 'error',
                  });
               }
            });
      };
      onMounted(() => {
         listApi();
      });
      // 删除
      const Deletes = (id: number) => {
         let arr = [];
         arr.push(id);
         ElMessageBox.confirm('确定删除所选项吗?', 'Warning', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
         })
            .then(() => {
               facilityManagementApi()
                  .getequipmentTypeMngDelete(arr)
                  .then((res) => {
                     if (res.data.code == 200) {
                        ElMessage({
                           showClose: true,
                           message: res.data.msg,
                           type: 'success',
                        });
                        listApi();
                     } else {
                     }
                  });
            })
            .catch(() => {
               ElMessage({
                  type: 'info',
                  message: 'Delete canceled',
               });
            });
      };
      const add = () => {
         listApi();
      };
      const tableData = ref();
      const propse = {
         children: 'childList',
      };
      const Show = ref();
      const openD = (title: string, id: number) => {
         Show.value.openDailog(title, id);
      };
      return {
         propse,
         add,
         tableData,
         Show,
         Deletes,
         openD,
         listApi,
         Plus,
         View,
         EditPen,
         CirclePlus,
         Delete,
      };
   },
});
</script>
<style scoped>
.box{
    padding: 20px;
    background-color: #fff;
.box {
   padding: 20px;
   background-color: #fff;
}
</style>