iotc/ruoyi-ui-vue3/src/views/device/equipmentdash/index.vue

<template>
  <div style="padding: 10px 15px">
    <el-row>
      <el-col :span="6" style="padding-right: 10px">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>设备台账区域</span>
              <div>
                <el-button type="primary" plain @click="addOrganizational()">
                  添加
                </el-button>
                <!-- <el-button type="primary" plain @click="updateOrganizational()">
                  编辑
                </el-button> -->
              </div>
            </div>
          </template>
          <div class="tree">
            <LayTree :data="treeList" :tail-node-icon="false" :onlyIconControl="true" v-model:selectedKey="selectedKey"
              @node-click="handleClick">
              <template #title="{ data }">
                <div style="display: flex;flex-direction: row;justify-content: space-around;">
                  <div @click="handleClickTitle(data)">{{ data.name }}</div>
                  <div>
                    <el-icon @click="updateOrganizational(data)">
                      <Edit />
                    </el-icon>
                    <el-popconfirm title="确定删除该标签?" @confirm="deleteOrganizational(data)">
                      <template #reference>
                        <el-button link><el-tooltip effect="dark" content="删除"><el-icon>
                              <Delete />
                            </el-icon></el-tooltip></el-button>
                      </template>
                    </el-popconfirm>
                  </div>
                </div>
              </template>
            </LayTree>
          </div>
        </el-card>
      </el-col>

      <el-col :span="18">
        <el-card class="box-card">
          <div style="display: flex; flex-direction: row; justify-content: space-between">
            <div style="display: flex; flex-direction: row;">
              <div style="
                  display: flex;
                  flex-direction: row;
                  flex-wrap: nowrap;
                  align-items: center;
                ">
                <div style="font-size: 12px; width: 80px;">设备名称:</div>
                <el-input v-model="searchform.name" placeholder="设备名称"></el-input>
              </div>
              <div style="
                  display: flex;
                  flex-direction: row;
                  flex-wrap: nowrap;
                  align-items: center;
                ">
                <div style="font-size: 12px; width: 80px;margin-left: 10px">设备编码:</div>
                <el-input v-model="searchform.sn" placeholder="设备编码"></el-input>
              </div>
            </div>
            <div>
              <el-button type="primary" plain @click="requery">重置</el-button>
              <el-button type="primary" @click="getlistEquipmentSbook">搜索</el-button>
            </div>
          </div>
        </el-card>

        <el-card class="box-card" style="margin-top: 10px;">
          <template #header>
            <div class="card-header">
              <span>设备台账</span>
              <div>
                <el-button type="primary" @click="goadd">添加</el-button>
                <el-button type="danger">批量删除</el-button>
                <el-button type="primary" plain @click="ziduanshow = true">显示字段</el-button>
              </div>
            </div>
          </template>

          <el-row>
            <el-col :span="24" style="padding-left: 10px">
              <el-table :data="devicetabledata" :border="true">
                <el-table-column type="selection" width="55" />
                <el-table-column v-for="item in columns.filter(i => i.visible)" :prop="item.prop" :label="item.label">
                  <template #default="scope" v-if="item.isTemplate">
                    <span>
                      {{ getData(item.func, scope.row, item.prop) }}
                      <!-- {{ eval(item.prop)}} -->
                    </span>
                  </template>
                </el-table-column>
                <!-- <el-table-column label="设备类型">
                  <template #default="scope">
                    {{ getTypeName(scope.row) }}
                  </template>
                </el-table-column> -->
                <el-table-column label="操作">
                  <template #default="scope">
                    <div>
                      <el-button link @click="goUpdate(scope.row)">
                        <el-tooltip effect="dark" content="修改">
                          <el-icon>
                            <Edit />
                          </el-icon>
                        </el-tooltip>
                      </el-button>
                      <el-button link @click="goDetail(scope.row)">
                        <el-tooltip effect="dark" content="详情">
                          <el-icon>
                            <Document />
                          </el-icon>
                        </el-tooltip>
                      </el-button>
                      <el-popconfirm title="确定删除该标签?" @confirm="deleteDevice(scope.row)">
                        <template #reference>
                          <el-button link><el-tooltip effect="dark" content="删除"><el-icon>
                                <Delete />
                              </el-icon></el-tooltip></el-button>
                        </template>
                      </el-popconfirm>
                    </div>
                  </template>
                </el-table-column>
              </el-table>


            </el-col>
            <el-col :span="24" style="margin-top: 10px;">
              <el-pagination style="float: right;" small background layout="prev, pager, next" :total="pagedata.total"
                :page-size="pagedata.size" :current-page="pagedata.current" @current-change="onchangepage"
                class="mt-4" />
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>

    <el-dialog v-model="dialogFormVisible" :title="dialogTitle">
      <el-form :model="organizationalQuery">
        <el-form-item label="上层位置" :label-width="formLabelWidth">
          <el-tree-select v-model="organizationalQuery.parentId" :data="treeList"
            :props="{ value: 'id', label: 'name', children: 'children' }" value-key="id" placeholder="请选上层位置"
            check-strictly />
        </el-form-item>
        <el-form-item label="组织机构编码" :label-width="formLabelWidth">
          <el-input v-model="organizationalQuery.sn" placeholder="请输入组织编码" />
        </el-form-item>
        <el-form-item label="组织机构名称" :label-width="formLabelWidth">
          <el-input v-model="organizationalQuery.name" placeholder="请输入组织名称" />
        </el-form-item>
        <el-form-item label="所属公司" :label-width="formLabelWidth">
          <el-input v-model="organizationalQuery.company" placeholder="请输入所属公司" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="saveOrgainzational()">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog title="字段显示" v-model="ziduanshow" width="50%" @close="ziduanshow = false">
      <div style="display: flex;flex-wrap: wrap;align-content: center;justify-content: center;align-items: center;">
        <el-checkbox v-for="item in columns" v-model="item.visible" :label="item.label" size="large" />
      </div>

    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="Units">
import { ref, toRaw } from "vue";
import { LayTree } from "@layui/layui-vue";
import "@layui/layui-vue/lib/index.css";

import { useRoute, useRouter } from "vue-router";
import { listEquipmentOrganizational, addEquipmentOrganizational, updateEquipmentOrganizational, delEquipmentOrganizational } from "@/api/data/equipmentOrganizational"
import { listEquipmentSbook, updateEquipmentSbook } from "@/api/data/equipmentSbook"
import { getDicts } from '@/api/system/dict/data'
import { cloneDeep } from "lodash";



const route = useRoute();
const router = useRouter();

const { proxy } = getCurrentInstance();

const dialogFormVisible = ref(false)

const ziduanshow = ref(false)

const formLabelWidth = '140px'

const dialogTitle = ref("新增组织架构")

const form = {
  name: '',
  region: ''
}

const organizationalQuery = ref({
  id: null,
  parentId: "",
  name: "",
  sn: "",
  company: '',
  ancestors: ""
})

const organizationalParams = ref({
  id: null,
  parentId: "",
  name: "",
  sn: "",
  company: '',
  ancestors: ''
})

const goUpdate = (item) => {
  // router.push({ name: 'EquipmentDashAdd', params: { userId: '123' }})
  router.push({ path: '/device/equipmentdash/add', query: { id: item.id } })
  // router.push({ name: "EquipmentDashAdd", params: { item } })
  // router.push({path:"/device/equipmentdash/add",params:item})
}

const goadd = () => {
  router.push("/device/equipmentdash/add")
}

const goDetail = (item) => {
  router.push({ path: '/device/equipmentdash/add', query: { id: item.id, isEdit: false } })
}

const handleClick = (node) => {
  console.log(node);
}

const handleClickTitle = (node) => {
  //console.log("Click Node:" + JSON.stringify(node));
  searchform.value.equipmentTreeId = node.id
  organizationalParams.value = node
  console.log(organizationalParams.value);
  getlistEquipmentSbook();
};
const selectedKey = ref(4);
const treeList = ref([]);
const typeList = ref([]);
const organizationalList = ref([]);

const pagedata = ref({
  total: 0,
  size: 10,
  current: 1
});

const devicetabledata = ref([]);
const searchform = ref({
  name: "",
  sn: "",
  equipmentTreeId: ""
});

const columns = ref([
  // {label: '上层位置', prop: 'v', visible: true},
  { label: '上层位置', prop: 'deptName', visible: true, isTemplate: false },
  { label: '设备编码', prop: 'sn', visible: true, isTemplate: false },
  { label: '备用编码', prop: 'spareSn', visible: true, isTemplate: false },
  { label: '设备名称', prop: 'name', visible: true, isTemplate: false },
  { label: '设备模板', prop: 'equipment.name', visible: true, isTemplate: false },
  //{label: '所属公司', prop: 'parity', visible: true},
  // { label: '所属组织机构', prop: 'deptName', visible: true },
  { label: '所属类型', prop: 'equipment.type', visible: true, },
  { label: '负责人', prop: 'uuid', visible: false, isTemplate: false },
  { label: '安装日期', prop: 'installationDate', visible: false, isTemplate: false },
  { label: '安装地点地址', prop: 'address', visible: false, isTemplate: false },
  { label: '关联设备Id', prop: 'protocolDesc', visible: false, isTemplate: false },
  { label: '标签', prop: 'tagids', visible: false, isTemplate: false },
  { label: '状态', prop: 'status', visible: false, isTemplate: false },
  { label: '保修期结束日期', prop: 'endOfWarrantyPeriod', visible: false, isTemplate: false },
  { label: '制造日期', prop: 'manufacturingDate', visible: false, isTemplate: false },
  { label: '资产编码', prop: 'assetNo', visible: false, isTemplate: false },
  { label: '资产编号', prop: 'serialNumber', visible: false, isTemplate: false },
  { label: '使用证编号', prop: 'useCertificateNo', visible: false, isTemplate: false },
  { label: '安全级别', prop: 'securityLevel', visible: false, isTemplate: false },
  { label: '使用年限', prop: 'usefulLife', visible: false, isTemplate: false },
  { label: '变动日期', prop: 'changeDate', visible: false, isTemplate: false },
  { label: '供货厂家', prop: 'supplier', visible: false, isTemplate: false },
  { label: '创建人', prop: 'createBy', visible: false, isTemplate: false },
  { label: '创建时间', prop: 'createTime', visible: false, isTemplate: false },
  { label: '更新人', prop: 'updateBy', visible: false, isTemplate: false },
  { label: '更新时间', prop: 'updateTime', visible: false, isTemplate: false },
  { label: '备注', prop: 'remark', visible: false, isTemplate: false },
])

const onchangepage = (page) => {
  pagedata.value.current = page;
  getlistEquipmentSbook();
}

const getTreedata = () => {
  listEquipmentOrganizational({ pageSize: 10000 }).then(res => {
    const { rows, total, page, size } = res;
    organizationalList.value = res.rows;
    treeList.value = proxy.handleTree(res.rows, "id", "parentId");
  })
}

const getData = (str, data, prop) => {
  console.log(data);
  //  let value = eval("data."+prop);
  //  console.log(value)
  let value = eval(str + "(data)")
  console.log(value);
  return value
}
// function getlistEquipmentSbook(){
//   listEquipmentSbook({ ...searchform.value, pageSize: pagedata.value.size, pageNum: pagedata.value.current }).then(res => {
//     const { rows, total, page, size } = res;
//     devicetabledata.value = res.rows
//   })
// }

const requery = () => {
  searchform.value = {
    name: "",
    sn: "",
    equipmentTreeId: ''
  }
  getlistEquipmentSbook();
}

const getlistEquipmentSbook = () => {
  listEquipmentSbook({ ...searchform.value, pageSize: pagedata.value.size, pageNum: pagedata.value.current }).then(res => {
    const { rows, total, page, size } = res;
    devicetabledata.value = res.rows
  })
}

const getDictsData = () => {
  getDicts("equipment_type").then(res => {
    typeList.value = res.data;
  })
}

const addOrganizational = () => {
  organizationalQuery.value = {
    id: null,
    parentId: "",
    name: "",
    sn: "",
    company: '',
    ancestors: ''
  }
  dialogTitle.value = "新增组织架构"
  dialogFormVisible.value = true
}

const updateOrganizational = (data) => {
  organizationalQuery.value = data
  dialogTitle.value = "修改组织架构"
  dialogFormVisible.value = true
}

const deleteOrganizational = (data) => {
  delEquipmentOrganizational(data.id).then(res => {
    getTreedata();
  })
}

const getTypeName = (scope) => {
  console.log(scope)
  var equipment = toRaw(scope)
  if (equipment != null) {
    for (var index in typeList.value) {
      var obj = toRaw(typeList.value[index]);
      if (obj.dictValue == equipment.equipmentTypeId) {
        console.log(obj.dictLabel);
        return obj.dictLabel
      }
    }
  }
}

const saveOrgainzational = () => {
  for (var index in organizationalList.value) {
    if (organizationalQuery.value.parentId == organizationalList.value[index].id) {
      console.log(organizationalList.value[index]);
      organizationalQuery.value.ancestors = organizationalList.value[index].ancestors + "," + organizationalList.value[index].id
    }
  }
  console.log(organizationalQuery.value.id);

  if (organizationalQuery.value.id != null) {
    let datac = cloneDeep(organizationalQuery.value);
    delete datac.parentNode;
    delete datac.children;
    updateEquipmentOrganizational(datac).then(res => {
      console.log(res);
      if (res.code == 200) {
        getTreedata();
        dialogFormVisible.value = false
      }
    })
  } else {
    let datac = cloneDeep(organizationalQuery.value);
    delete datac.parentNode;
    delete datac.children;
    addEquipmentOrganizational(datac).then(res => {
      if (res.code == 200) {
        getTreedata();
        dialogFormVisible.value = false
      }
    })
  }
}

const deleteDevice = (scope) => {
  console.log(scope.id)
  var obj = {
    id: scope.id,
    isDelete: 1
  }
  updateEquipmentSbook(obj).then(res => {
    getlistEquipmentSbook();
  })
}

getTreedata();
getlistEquipmentSbook();
getDictsData();
</script>

<style lang="scss" scoped>
.card-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.tree {

  *,
  *:before,
  *:after {
    box-sizing: content-box !important;
  }
}
</style>