yifengyide/src/views/system/department.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>
        <lay-button type="primary" @click="openNew()" size="sm">新增科室</lay-button>
      </div>
      <lay-table size="lg" ref="tableRef6" children-column-name="children" :columns="columns6"
        :data-source="dataSource6">
        <template v-slot:status="{ data }">
          <span v-if="data.status == 1">启用</span>
          <span v-if="data.status == 0">禁用</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" @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="name">
            <lay-input v-model="addData.name" placeholder="请输入科室名称"></lay-input>
          </lay-form-item>
          <lay-form-item required label="科室描述" prop="describe">
            <lay-textarea placeholder="请输入科室描述" v-model="addData.describe"></lay-textarea>
          </lay-form-item>
          <lay-form-item required label="状态" prop="status">
            <lay-select v-model="addData.status" placeholder="请选择">
              <lay-select-option :value="1" label="启用"></lay-select-option>
              <lay-select-option :value="0" label="禁用"></lay-select-option>
            </lay-select>
          </lay-form-item>
        </lay-form>
      </lay-container>
    </lay-layer>
  </lay-container>
</template>
<script setup lang="ts">
import {
  userGroupDataAdd, homeGetHierarchicalDataDelete,
  userGroupData, userGroupDataEdit, userGroupDataDel
} from '../../api/module/home'
import { ref, watch, onMounted, reactive } from 'vue'
import { layer } from '@layui/layer-vue'
//列表内容
const dataSource6 = ref([]);
const addShow = ref(false)
//1 add  2 edit
const addIsEdit = ref(1)
const addData = reactive({
  name: '',
  describe: '',
  status: 1,
  pid: 0,
})
onMounted(() => {
  getHierarchicalData()
})
const openNew = () => {

  addData.id = 0;
  addData.pid = 0;
  addIsEdit.value = 1;
  addData.name = '';
  addData.describe = '';
  addData.status = 1;
  addShow.value = true;
}
const getHierarchicalData = async () => {
  // 调用接口获取数据
  userGroupData({}).then((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.id = 0;
  addData.pid = pid;
  addData.name = '';
  addData.describe = '';
  addData.status = 1;
  addIsEdit.value = 1;
}
const editShowMsd = (data) => {
  console.log(data);
  addShow.value = true;
  addData.id = data.id;
  addData.name = data.name;
  addData.pid = data.pid;
  addData.status = parseInt(data.status);
  addData.describe = data.describe;
  addIsEdit.value = 2;
}
const delShowMsd = async (data) => {
  var res = await userGroupDataDel({ 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: "200px",
    key: "name"
  },
  {
    title: "科室描述",
    width: "300px",
    key: "describe"
  },
  {
    title: "状态",
    width: "100px",
    customSlot: 'status',
    key: "status"
  },
  {
    title: '操作',
    width: '180px',
    customSlot: 'operator',
    key: 'operator',
    align: 'center',
    fixed: 'right'
  }
]
const addButton = ref([
  {
    text: "确认",
    callback: async () => {
      console.log(addData);
      if (addData.name == '') {
        layer.msg('科室名称不能为空！', { icon: 2 })
        return;
      }
      if (addData.describe == '') {
        layer.msg('科室描述不能为空！', { icon: 2 })
        return;
      }
      if (addIsEdit.value == 1) {
        var res = await userGroupDataAdd(addData);
      } else {
        var res = await userGroupDataEdit(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>