shuili-vue/src/views/dike/runManage/dangerWeakProject/inspectItemsSetting/index.vue

<template>
  <div class="body slider-right">
    <div class="top-title">基础信息管理</div>
    <div class="items-list-page">
      <div class="pl-20 pr-20 pt-20 flex justify-between">
        <el-button type="primary" @click="handleAddNew">新增项目</el-button>
      </div>
      <div class="items-list-box">
        <div
          v-for="item in listData"
          :key="item.id"
          class="items-list-item"
          @click="handleToItemsSetting(item)"
        >
          <div class="font-14 font-bold">{{ item.name }}</div>
          <div class="font-12 mt-18">创建时间：{{ item.createTime }}</div>
          <div class="font-12 mt-6">
            最后更新: {{ getCreator(item.updateUid) }}
          </div>
          <i
            class="el-icon-error font-14 del-btn"
            @click.stop="handleDel(item)"
          ></i>
        </div>
        <div
          v-if="!listData || !listData.length"
          style="color: #333"
          class="text-center pt-30"
        >
          -暂无数据-
        </div>
      </div>
    </div>

    <!-- 弹窗 -->
    <el-dialog
      title="新增项目"
      @close="handleClose"
      :visible.sync="showAddDialog"
      :close-on-click-modal="false"
      width="640px"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="60px"
        class=""
      >
        <el-form-item label="名称" prop="name">
          <el-input v-model="ruleForm.name" :maxlength="50"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="handleClose()">取 消</el-button>
        <el-button size="mini" type="primary" @click="submitForm()"
          >保存</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  addDangerProjectItemsData,
  getDangerProjectItemsListData,
  delDangerProjectItemsData,
} from "@/api/dike";
import { listUser } from "@/api/system/user";
export default {
  data() {
    return {
      showAddDialog: false,
      listData: [],
      personnelList: [],
      ruleForm: {
        name: "",
      },
      rules: {
        name: [{ required: true, message: "请输入项目名称", trigger: "blur" }],
      },
    };
  },
  created() {
    this.getUser();
    this.initData();
  },
  methods: {
    initData() {
      getDangerProjectItemsListData({}).then((res) => {
        this.listData = res.data || [];
      });
    },
    getUser() {
      listUser({
        data: {
          timeView: {
            timeField: "create_time",
          },
        },
        pageSize: 50,
        pageNum: 1,
      }).then((res) => {
        this.personnelList = res.records;
      });
    },
    getCreator(id) {
      const creator = this.personnelList.find((item) => item.id === id);
      return creator ? creator.nickName : "";
    },
    handleAddNew() {
      this.showAddDialog = true;
    },
    handleClose() {
      this.$refs.ruleForm.resetFields();
      this.showAddDialog = false;
    },
    submitForm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          addDangerProjectItemsData({
            name: this.ruleForm.name,
          }).then((res) => {
            this.listData.push(res.data);
            this.$refs.ruleForm.resetFields();
            this.showAddDialog = false;
          });
        }
      });
    },
    handleDel(row) {
      // 二次确认
      this.$confirm("此操作将永久删除该项目, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delDangerProjectItemsData(row.id).then((res) => {
            this.initData();
          });
        })
        .catch(() => {});
    },
    handleToItemsSetting(row) {
      this.$router.push({
        path: "inspectItemDetails",
        query: {
          id: row.id,
        },
      });
    },
  },
};
</script>
<style scoped lang="scss">
.body {
  width: 100%;
  min-height: calc(100vh - 36px);
  padding-left: 24px;

  .top-title {
    height: 40px;
    background-color: white;
    display: flex;
    padding-left: 16px;
    align-items: center;
    font-weight: 600;
  }
  .items-list-page {
    margin-top: 20px;
    background-color: #fff;
    height: calc(100% - 56px);
  }
  .input {
    width: 200px;
  }
  .items-list-box {
    display: grid;
    padding: 16px 20px 24px;
    overflow-y: auto;
    transition: all 0.5s;
    grid-template-columns: repeat(auto-fill, 240px);
    grid-template-rows: repeat(auto-fill, 160px);
    gap: 16px;
    .items-list-item {
      position: relative;
      width: 240px;
      height: 120px;
      padding: 20px;
      box-sizing: border-box;
      border: 1px solid #eee;
      border-radius: 10px;
      cursor: pointer;
      &:hover {
        box-shadow: 0 0 10px #eee;
        .del-btn {
          display: block;
        }
      }

      .del-btn {
        display: none;
        position: absolute;
        font-size: 24px;
        z-index: 1;
        right: -8px;
        top: -8px;
        font-weight: 600;
        color: #999;
      }
    }
  }
}
</style>