logpm_page/src/views/supervise/management.vue

<template>
  <basic-container>
    <!-- 首页表格 -->

    <div class="avue-crud">
      <!-- 搜索模块 -->
      <el-row v-if="search">
        <!-- 查询模块 -->
        <el-form :inline="true" :model="query" class="el-fr-d">
          <!-- 查询按钮 -->
          <el-form-item class="el-btn">
            <el-button type="primary" icon="el-icon-search" @click="searchChange">搜 索</el-button>
            <el-button icon="el-icon-delete" @click="searchReset()">清 空</el-button>
          </el-form-item>
        </el-form>
      </el-row>

      <!-- 控件模块 -->
      <el-row>
        <div class="avue-crud__header">
          <!-- 头部左侧按钮模块 -->
          <div class="avue-crud__left">
            <el-button type="primary" @click="AddCategory">
              <el-icon><Plus /></el-icon>新 增</el-button
            >

            <el-button type="primary" @click="BatchDelete">
              <el-icon><Plus /></el-icon>批量删除</el-button
            >
          </div>
          <!-- 头部右侧按钮模块 -->
          <div class="avue-crud__right">
            <el-button icon="el-icon-refresh" @click="searchChangeS" circle></el-button>
            <el-button icon="Operation" @click="showdrawer(true)" circle></el-button>
            <el-button icon="Search" @click="searchHide" circle></el-button>
          </div>
        </div>
      </el-row>

      <!-- 首页表格 -->
      <el-row>
        <!-- 列表模块 -->
        <tablecmt
          :columnList="classificationColumnList"
          :tableData="classificationdata"
          :loading="loadingclassification"
          @inputTxt="inputsc"
          @timeCheck="timesc"
          @btnCheck="btnsc"
          @selectCheck="selectsc"
          @selection="selectionChange"
        >
          <template #default="slotProps">
            <template v-if="slotProps.scope.column.label === '操作'">
              <div class="ElBtnClass">
                <el-button text @click="ClassificationDditing(slotProps.scope)">编辑</el-button>
                <el-button text type="primary" @click="CategoryDeletion(slotProps.scope)"
                  >删除</el-button
                >
              </div>
            </template>
          </template>
        </tablecmt>
      </el-row>

      <!-- 分页模块 -->
      <el-row class="el-fy">
        <div class="avue-crud__pagination flex-c-sb" style="width: 100%">
          <div></div>
          <el-pagination
            align="right"
            background
            @size-change="sizeChange"
            @current-change="currentChange"
            :current-page="currentPage"
            :page-sizes="[30, 50, 80, 120]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </el-row>
    </div>

    <el-dialog v-model="newlyAdded" :title="title ? '新增指标' : '编辑指标'" width="30%">
      <el-form v-loading="loadingAddPopup" :model="lassificationform" label-width="120px">
        <el-form-item label="指标分类">
          <el-select
            v-model="lassificationform.classificationoptionsvalue"
            filterable
            placeholder="请选择指标分类"
            style="width:100%"
          >
            <el-option
              v-for="item in classificationoptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="指标名称">
          <el-input v-model="lassificationform.name" placeholder="请输入指标名称" />
        </el-form-item>

        <el-form-item label="指标描述">
          <el-input
            v-model="lassificationform.description"
            :rows="4"
            type="textarea"
            placeholder="请输入指标描述"
          />
        </el-form-item>
        <div class="el_integral">
          <el-form-item label="积分值">
            <el-input-number
              v-for="item in PointsList"
              v-model="item.integral"
              class="mx-4"
              controls-position="right"
              @change="handleChange"
            />
          </el-form-item>
          <div class="el_add" @click="integralAdd">+</div>
        </div>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="newlyAdded = false">取消</el-button>
          <el-button :disabled="loadingAddPopup" type="primary" @click="newlyAddedFn">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>



  </basic-container>

  <!-- 列表配置显示 -->
  <edittablehead
    @setcolum="setnewcolum"
    @closce="showdrawer"
    :drawerShow="drawerShow"
    :columnList="classificationColumnList"
  ></edittablehead>
</template>

<script setup>
import { ElMessage, ElMessageBox } from 'element-plus';
import { ref, reactive, computed, onMounted } from 'vue';
import { classificationColumnList } from '@/option/supervise/supervise.js';
import {
  $_Getclassify,
  $_newlyadded,
  $_newlyremove,
  $_selectParentCalssifyList,
  $_classifyAddChild,
  $_classifupdateChild,
} from '@/api/classify/classify';
const loadingclassification = ref(false); //指标分类加载效果
const classificationdata = ref([]); //指标分类数据
const current = ref(1); //当前页
const total = ref(10); //总页数
const pageSize = ref(50);
const lassificationform = ref({}); //分类表单
const title = ref(true); //标题
const EditID = ref(true); //编辑需要的ID
const newlyAdded = ref(false); //新增弹窗
const loadingAddPopup = ref(false); //弹窗加载
const selectionList = ref([]); //选中数据
const classificationoptions = ref([]); //指标分类接口
const classificationoptionsvalue = ref([]); //分类选择的
const PointsList = ref([{ integral: 0 }]); //积分列表
const onLoad = () => {
  let data = {
    current: current.value,
    size: pageSize.value,
    isPid: 0,
  };
  loadingclassification.value = true; //开启加载效果
  $_Getclassify(data)
    .then(res => {
      console.log(res);
      classificationdata.value = res.data.data.records; //数据
      total.value = res.data.data.total; //总页数
    })
    .catch(res => {})
    .finally(() => {
      loadingclassification.value = false; //开启加载效果
    });
  // 获取分类
  $_selectParentCalssifyList().then(res => {
    console.log(res, '指标分类');
    classificationoptions.value = res.data.data;
    console.log(classificationoptions.value, '存储的指标');
  });
};
onLoad();
// 页码
const sizeChange = () => {};
const currentPage = () => {};
const currentChange = () => {};
// 分类编辑
const ClassificationDditing = val => {
  console.log(val);
  EditID.value = val.row.id; //编辑需要的ID
  title.value = false; //关闭编辑
  newlyAdded.value = true; //开启弹窗
  PointsList.value=[];//重置积分
  let data = val.row;
  lassificationform.value.classificationoptionsvalue = data.pid; //分类
  lassificationform.value.name = data.name; //分类名称
  lassificationform.value.description = data.description; //分类描述
  // 积分管理回显
  data.pointsEntities.forEach(res=>{
    PointsList.value.push({integral:res.point})   
  })
};

// 分类新增按钮
const AddCategory = () => {
  title.value = true; //开启新增
  newlyAdded.value = true; //开启编辑
  lassificationform.value = {}; //重置表单
  PointsList.value=[{integral:0}];//重置积分
};

// 批量删除分类
const BatchDelete = () => {
  if (!selectionList.value.length) {
    ElMessage({
      message: '请勾选要批量删除的数据',
      type: 'warning',
    });
    return;
  }
  loadingclassification.value = true; //开启加载效果

  let data = {
    ids: [],
  };
  data['ids'] = selectionList.value.map(res => res.id);
  data['ids'] = data['ids'].join(',');
  console.log(data, '批量删除');

  $_newlyremove(data)
    .then(res => {
      console.log(res, '删除成功返回值');
      ElMessage({
        message: res.data.msg,
        type: 'success',
      });
      onLoad();
    })
    .catch(res => {})
    .finally(() => {
      loadingclassification.value = false; //关闭加载效果
    });
};
// 分类删除
const CategoryDeletion = val => {
  ElMessageBox.confirm(`是否删除${val.row.name}分类?`, 'Warning', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => {
      loadingclassification.value = true; //开启加载效果
      let data = {
        ids: [],
      };
      data['ids'].push(val.row.id);
      data['ids'] = data['ids'].join(',');
      $_newlyremove(data)
        .then(res => {
          console.log(res, '删除成功返回值');
          ElMessage({
            message: res.data.msg,
            type: 'success',
          });
          onLoad();
        })
        .catch(res => {})
        .finally(() => {
          loadingclassification.value = false; //关闭加载效果
        });
    })
    .catch(() => {});
};
// 新增分类
const newlyAddedFn = () => {
  let data = {
      name: lassificationform.value.name, //分类名称
      description: lassificationform.value.description, //分类描述
      pid: lassificationform.value.classificationoptionsvalue,//分类ID
      pointsEntities: [], //积分
    };
    loadingAddPopup.value = true; //关闭弹窗加载
  if (title.value) {
    // 新增
    PointsList.value.forEach(res => {
      data['pointsEntities'].push({ point: res.integral });
    });
    $_classifyAddChild(data)
      .then(res => {
        if (res.data.code == 200) {
          newlyAdded.value = false; //关闭弹窗
          ElMessage({
            message: res.data.msg,
            type: 'success',
          });
          onLoad();
        }
      })
      .catch(res => {})
      .finally(() => {
        loadingAddPopup.value = false; //关闭弹窗加载
      });
  } else {

    // 编辑
    data.id =EditID.value,//编辑需要的id
    PointsList.value.forEach(res => {
      data['pointsEntities'].push({ point: res.integral });
    });
    $_classifupdateChild(data).then(res=>{
      console.log(res,'编辑成功');
      if(res.data.code == 200){
        newlyAdded.value = false; //关闭弹窗
        ElMessage({
            message: res.data.msg,
            type: 'success',
          });
          onLoad();
      }
    }).catch(res=>{

    }).finally(()=>{
      loadingAddPopup.value = false; //关闭弹窗加载
    })
    
  }
};
// 表格选择
const selectionChange = list => {
  selectionList.value = list;
  console.log(selectionList.value, '已经选中的数据');
};
// 积分新增
const integralAdd = () => {
  PointsList.value.push({ integral: 0 });
};
// 积分编辑按钮
const IntegralEditing=()=>{

}
// 积分新增确定
const PointsManagementFn=()=>{

}
</script>

<style scoped lang="scss">
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
.ElBtnClass {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
}
:deep(.el_integral) {
  display: flex;
  .el-form-item {
    width: 100% !important;
    margin-right: 0;
    .el-input-number {
      width: 100%;
      margin-bottom: 14px;
    }
  }
  .el_add {
    font-size: 20px;
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }
}
</style>