yifengyide/src/views/configuration/foundation.vue

<template>
  <lay-container style="padding: 20px">
    <lay-card>
      <div style="padding: 10px">
        <span style="font-size: 18px;vertical-align: center;margin-right: 20px">基础评分列表</span>
      </div>
      <lay-table size="lg" ref="tableRef6" children-column-name="children" :columns="columns6"
                 :data-source="dataSource6">
        <template v-slot:scoring_type="{data}">
          <span v-if="data.scoring_type==1">年度</span>
          <span v-if="data.scoring_type==2">季度</span>
          <span v-if="data.scoring_type==3">月度</span>
        </template>
        <template v-slot:operator="{data}">
          <lay-space size="lg">
            <span style="color: #00A394;cursor: pointer" @click="addShowMsd(data,data.pid)">平级新增</span>
            <span style="color: #00A394;cursor: pointer" v-if="data.pid==0" @click="addShowMsd(data,data.id)">子级新增</span>
            <span style="color: #00A394;cursor: pointer" @click="editShowMsd(data)">编辑</span>
            <lay-popconfirm trigger="click" content="确定要删除吗？" @confirm="delShowMsd(data)">
              <span style="color: #00A394;cursor: pointer">删除</span>
            </lay-popconfirm>
          </lay-space>
        </template>
      </lay-table>
    </lay-card>
    <lay-layer v-model="addShow" :title="addIsEdit==1?'新增考评项目':'编辑考评项目'" :type="4" :shade="true" :area="['950px','100%']" :btn="addButton">
      <lay-container fluid="true" style="padding: 20px">
          <lay-form :model="addData">
            <lay-form-item required label="项目代码" prop="project_code">
              <lay-input v-model="addData.project_code" placeholder="请输入项目代码"></lay-input>
            </lay-form-item>
            <lay-form-item required label="项目名称" prop="project_name">
              <lay-textarea placeholder="请输入项目名称" v-model="addData.project_name"></lay-textarea>
            </lay-form-item>
            <lay-form-item required label="基础分值" prop="base_score">
              <lay-input-number v-model="addData.base_score"  position="right"></lay-input-number>
            </lay-form-item>
            <lay-form-item required label="评分类型" prop="scoring_type">
              <lay-select v-model="addData.scoring_type" :disabled="true" placeholder="请选择">
                <lay-select-option :value="1" label="年度"></lay-select-option>
                <lay-select-option :value="2" label="季度"></lay-select-option>
                <lay-select-option :value="3" label="月度"></lay-select-option>
              </lay-select>
            </lay-form-item>
          </lay-form>
      </lay-container>
    </lay-layer>
  </lay-container>
</template>
<script setup lang="ts">
import {
  homeGetHierarchicalData,
  homeGetHierarchicalDataCreate, homeGetHierarchicalDataDelete,
  homeGetHierarchicalDataUpdate
} from '../../api/module/home'
import {ref, watch, onMounted, reactive} from 'vue'
import {layer} from '@layui/layer-vue'
import {verificationImg} from "@/api/module/commone";
//列表内容
const dataSource6 = ref([]);
const addShow = ref(false)
//1 add  2 edit
const addIsEdit = ref(1)
const addData = reactive({
  project_code: '',
  project_name: '',
  base_score:0,
  scoring_type: '',
  pid:0,
})
onMounted(() => {
  getHierarchicalData()
})
const getHierarchicalData = () => {
  homeGetHierarchicalData({}).then((res) => {
    console.log(res)
    if (res.code == 1) {
      dataSource6.value = res.data;
    } else {
      layer.msg(res.msg, {icon: 2})
    }
  })
}
const addShowMsd = (data,pid) => {
  console.log(data);
  addShow.value = true;
  addData.scoring_type=data.scoring_type;
  addData.pid=pid;
  addIsEdit.value=1;
}
const editShowMsd = (data) => {
  console.log(data);
  addShow.value = true;
  addData.id=data.id;
  addData.project_name=data.project_name;
  addData.project_code=data.project_code;
  addData.base_score=data.base_score;
  addData.scoring_type=data.scoring_type;
  addIsEdit.value=2;
}
const delShowMsd = async (data) => {
  var res = await homeGetHierarchicalDataDelete({id: data.id});
  console.log(res)
  if (res.code == 1) {
    layer.msg('删除成功！', {icon: 1})
    getHierarchicalData();
  } else {
    layer.msg(res.msg, {icon: 2})
  }
}
const columns6 = [
  {
    title: "项目名称",
    width: "100px",
    key: "project_name"
  },
  {
    title: "基础分值",
    width: "200px",
    key: "base_score"
  },
  {
    title: "项目代码",
    width: "100px",
    key: "project_code"
  },
  {
    title: "评分类型",
    width: "100px",
    customSlot: 'scoring_type',
    key: "scoring_type"
  },
  {
    title: '操作',
    width: '180px',
    customSlot: 'operator',
    key: 'operator',
    align: 'center',
    fixed: 'right'
  }
]
const addButton = ref([
  {
    text: "确认",
    callback: async () => {
      console.log(addData);
      if (addData.project_name == '') {
        layer.msg('项目名称不能为空！', {icon: 2})
      }
      if (addData.project_code == '') {
        layer.msg('项目代码不能为空！', {icon: 2})
      }
      if (addData.base_score == '' || addData.base_score == 0) {
        layer.msg('基础分值不能为空或为0！', {icon: 2, time: 1000})
      }
      if(addIsEdit.value==1){
        var res = await homeGetHierarchicalDataCreate(addData);
      }else{
        var res = await homeGetHierarchicalDataUpdate(addData);
      }
      console.log(res)
      if (res.code == 1) {
        layer.msg('提交成功！', {icon: 1})
        addShow.value = false;
        getHierarchicalData();
      } else {
        layer.msg(res.msg, {icon: 2})
      }
    }
  },
  {
    text: "取消",
    callback: () => {
      addShow.value = false;
    }
  }
])
</script>
<style scoped>

</style>