peisweb/src/views/user-list/OrganizationUnits.vue

<template>
  <div>
    <el-card style="height: 600px">
      <!-- <el-button type="primary" @click="addorginiztiom">新增组织</el-button> -->
      <div class="publicfontsize">科室设置</div>
      <div class="allC">
        <!-- <i
          class="el-icon-link"
          v-if="natureoptions.length == '0' ? false : true"
        ></i
        ><span>组织架构</span> -->
        <div
          v-if="natureoptions.length == '0' ? true : false"
          @click="append(node, data)"
        >
          <i class="el-icon-link" @click="append"></i><span> 添加组织</span>
        </div>
        <el-tree
          :default-expand-all="true"
          :expand-on-click-node="false"
          :data="natureoptions"
          :props="defaultProps"
          :show-checkbox="false"
          ref="tree"
          node-key="id"
          style="width: 30%; margin-top: 20px"
          @check="check"
        >
          <span slot-scope="{ node, data }">
            <span>{{ node.label }}</span>
            <span>
              <!-- <i
                v-if="data.id !== 0"
                class="el-icon-plus"
                @click="append(node, data)"
                style="font-size:15px"
              ></i> -->
              <el-button
                type="primary"
                size="small"
                style="padding: 3px; font-size: 15px; margin-left: 5%"
                @click="() => addorginiztiom(node, data)"
                >新增同级</el-button
              >
              <el-button
                type="primary"
                size="mini"
                style="padding: 3px; font-size: 15px"
                @click="append(node, data)"
                >新增子级</el-button
              >
              <!-- <i class="el-icon-delete" @click="() => deleates(node, data)" style="font-size:15px"></i>   -->
              <el-button
                type="danger"
                size="mini"
                style="padding: 3px; font-size: 15px"
                @click="() => deleates(node, data)"
                >删除</el-button
              >

              <!-- <i class="el-icon-edit" @click="() => rena(node, data)" style="font-size:15px">编辑</i> -->
              <el-button
                type="primary"
                size="small"
                style="padding: 3px; font-size: 15px"
                @click="() => rena(node, data)"
                >编辑</el-button
              >
            </span>
          </span>
        </el-tree>
        <!-- 弹框 -->
        <!-- <el-button type="primary" @click="addorginiztiom" style="height: 40px"
          >新增组织</el-button
        > -->
      </div>
      <!-- 新增组织弹框 -->
      <el-dialog
        :title="title == 2 ? '修改组织' : '新增组织'"
        :visible.sync="dialogVisible"
        width="50%"
        @close="closethiebox"
        :close-on-click-modal="false"
      >
        <div v-if="title == 2">
          当前选中的科室<span
            style="margin-left: 20px; font-size: 18px; margin-top: -20px"
            >{{ departmentnames }}</span
          >
        </div>
        <div v-if="title == 2">
          <span>上级部门</span>
          <el-cascader
            v-model="departmentname"
            ref="depref"
            @change="cascaderchang"
            :show-all-levels="false"
            :options="selecttable"
            :props="{
              checkStrictly: true,
              children: 'treeChildren',
              label: 'displayName',
              value: 'displayName',
            }"
            clearable
          ></el-cascader>
          <!-- <el-tree
            :data="title == 1 ? treedata : selecttable"
            :props="defaultProp"
            @node-click="treeclick"
          >
          </el-tree> -->
        </div>
        <el-row>
          <el-col :span="8" style="line-height: 40px">
            是否为体检中心
            <el-radio-group v-model="form.isPeis">
              <el-radio label="Y">是</el-radio>
              <el-radio label="N">否</el-radio>
            </el-radio-group>
            <!-- <el-radio v-model="form.isPeis" label="Y">是</el-radio>
            <el-radio v-model="form.isPeis" label="N">否</el-radio> -->
          </el-col>
          <el-col :span="12">
            <el-form :model="form">
              <el-form-item label="名称" label-width="80px">
                <el-input v-model="form.displayName"></el-input>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="organizationtreeaddoredit"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>
<script>
import {
  organizationtree,
  organizationcaeatre,
  deleteschema,
  modifyedit,
} from "../../request/ruquset";
import { postapi, putapi, getapi } from "@/api/api";
export default {
  data() {
    return {
      showcheckbox: false,
      defaultKeys: [],
      selecttable: [], //科室的选择选中
      form: {
        parentId: "",
        displayName: "",
        isPeis: "N",
        departmentname: "",
      },
      title: 1,
      dialogVisible: false,
      natureoptions: [],
      defaultProp: {
        children: "treeChildren",
        label: "displayName",
        value: "displayName",
      },
      defaultProps: {
        children: "treeChildren",
        label: "displayName",
      },
      checked: false,
      parent: 1,
      treedata: [],
      departmentname: "", //科室名称
      departmentnames: "",
    };
  },
  mounted() {
    this.getonorganization();
  },
  methods: {
    cascaderchang(v) {
      console.log(this.departmentname);
      this.departmentnames = v[v.length - 1];
      // localStorage.setItem("departmentname", v[v.length - 1]);
      // console.log(v[v.length-1]);
      // v.forEach((item) => {
      //   this.departmentname = item;
      // });
      // let a=this.depref.value.togglePoppervisible()
      // console.log(a);
    },
    //选中的组织
    treeclick(data) {
      this.departmentname = data.displayName;
      console.log(data);
    },
    //close弹框关闭事件
    closethiebox() {
      this.departmentname = "";
    },
    //关闭弹框
    closethebulletbox() {
      this.dialogVisible = false;
      this.form = {};
      this.form.isPeis = "N";
    },
    //确定新增或者编辑
    organizationtreeaddoredit() {
      if (this.title == 1) {
        if (this.form.displayName != "") {
          console.log(this.form.parentId);
          if (this.form.parentId == "") {
            postapi("/api/app/organization-units/creatre", {
              displayName: this.form.displayName,
              isPeis: this.form.isPeis,
            }).then((res) => {
              if (res.code == 0) {
                this.$message.success("新增成功");
                this.dialogVisible = false;
                this.form.displayName = "";
                this.getonorganization();
              }
            });
          } else {
            postapi("/api/app/organization-units/creatre", {
              displayName: this.form.displayName,
              isPeis: this.form.isPeis,
              parentId: this.form.parentId,
            }).then((res) => {
              if (res.code == 0) {
                this.$message.success("新增成功11");
                this.dialogVisible = false;
                this.form.displayName = "";
                this.getonorganization();
              }
            });
          }
        } else {
          this.$message.warning("请输入名称");
        }
      } else if (this.title == 2) {
        putapi(
          `/api/app/organization-units?Id=${this.form.id}&DisplayName=${this.form.displayName}&IsPeis=${this.form.isPeis}`
        ).then((res) => {
          if (res.code == 0) {
            this.$message.success("编辑成功");
            this.dialogVisible = false;
            this.getonorganization();
          }
        });
      } else if (this.title == 3) {
        if (this.form.displayName == "") {
          this.$message.warning("请输入名称");
        } else {
          postapi("/api/app/organization-units/creatre", {
            displayName: this.form.displayName,
            isPeis: this.form.isPeis,
            parentId: this.form.parentId,
          }).then((res) => {
            this.$message.success("新增成功");
            this.dialogVisible = false;
            // this.form = {};
            this.form.displayName = "";
            this.form.isPeis = "N";
            this.getonorganization();
          });
        }
      }
    },
    check(data) {
      console.log(data);
      localStorage.setItem("dataidkes", data.id);
      //  this.$refs.tree.getCheckedKeys()
    },
    getonorganization() {
      organizationtree().then((res) => {
        this.natureoptions = res.data;
        console.log(res);
      });
    },
    //添加父级组织
    addorginiztiom(node, data) {
      // this.$prompt("组织名称", "新增组织", {
      //   confirmButtonText: "确定",
      //   cancelButtonText: "取消",
      //   inputPattern: /^[\u4e00-\u9fa5]{0,}$/, //匹配全中文
      //   inputErrorMessage: "请输入中文", //不符合正则匹配的提示语句
      // }).then(({ value }) => {
      //   //parentId:data.id
      //   organizationcaeatre({ displayName: value }).then((res) => {
      //     this.getonorganization();
      //     this.$message.success("新增成功");
      //   });
      // });

      getapi("/api/app/organization-units/by-code-all").then((res) => {
        this.treedata = res.data;
        console.log(res);
      });
      this.selecttable = [];
      this.dialogVisible = true;
      this.title = 1;
      if (this.title == 1) {
        this.form.parentId = data.parentId;
        console.log(this.form.parentId);
      }
      // this.form.parentId = "";
      console.log(this.form);
      this.form.displayName = "";
    },
    //新增组织组织
    append(node, data) {
      this.form.displayName = "";
      this.title = 3;
      if (this.title == 3) {
        this.dialogVisible = true;
        this.form.parentId = data.id;
        console.log(this.form.parentId);
        console.log(this.form);
      }

      // if(this.natureoptions)
      // console.log(node, data);
      // if (this.natureoptions.length == 0) {
      //   this.$prompt("组织名称", "增加组织", {
      //     confirmButtonText: "确定",
      //     cancelButtonText: "取消",
      //     inputPattern: /^[\u4e00-\u9fa5]{0,}$/, //匹配全中文
      //     inputErrorMessage: "请输入中文", //不符合正则匹配的提示语句
      //   }).then(({ value }) => {
      //     //parentId:data.id
      //     organizationcaeatre({ displayName: value }).then((res) => {
      //       this.getonorganization();
      //       this.$message.success("新增成功");
      //     });
      //   });
      // } else {
      //   this.$prompt("组织名称", "增加组织", {
      //     confirmButtonText: "确定",
      //     cancelButtonText: "取消",
      //     inputPattern: /^[\u4e00-\u9fa5]{0,}$/, //匹配全中文
      //     inputErrorMessage: "请输入中文", //不符合正则匹配的提示语句
      //   }).then(({ value }) => {
      //     //parentId:data.id
      //     organizationcaeatre({ displayName: value, parentId: data.id }).then(
      //       (res) => {
      //         this.getonorganization();
      //         this.$message.success("新增成功");
      //       }
      //     );
      //   });
      // }
    },
    //删除组织
    deleates(data) {
      this.$confirm("是否确定删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then((res) => {
        deleteschema(data.data.id).then((res) => {
          if (res.code == 0) {
            console.log(res);
            this.$message.success("删除成功");
            this.getonorganization();
          }
        });
        console.log(data);
      });
    },
    //编辑组织
    rena(node, data) {
      let a = this.$refs.tree.getNode(data.id).parent.data.displayName;
      if (a == undefined) {
        this.departmentname = "已是最上级";
        console.log(this.departmentname);
      } else {
        this.departmentname = a;
      }
      // this.departmentname = a;
      console.log(a);
      console.log(this.departmentname);
      // this.departmentname = localStorage.getItem("departmentname");
      console.log(data, "data");
      this.dialogVisible = true;
      this.title = 2;
      console.log(this.form.isPeis);
      // this.selecttable.push(data);
      
      this.showcheckbox = true;
      this.form = data;
      this.form.isPeis = "N";
      // console.log(this.selecttable, 5555);
      getapi(
        `/api/app/organizationunit/getbycodeparent?OrganizationUnitId=${data.id}`
      ).then((res) => {
        this.selecttable = res.data;
        console.log(res, "res");
      });
      // getapi(`/api/app/organization-units?Id=${data.id}`).then((res) => {
      //   this.form = res.data;

      //   console.log(res);
      // });

      // this.form = data;
      // console.log(this.form);
      // console.log(data);
      // this.$prompt("组织名称", "修改组织", {
      //   confirmButtonText: "确定",
      //   cancelButtonText: "取消",
      //   // inputPattern: /^[\u4e00-\u9fa5]{0,}$/, //匹配全中文
      //   // inputErrorMessage: "请输入中文", //不符合正则匹配的提示语句
      // }).then(({ value }) => {
      //   console.log(value);
      //   modifyedit(data.id, value).then((res) => {
      //     this.getonorganization();
      //     // console.log(res)
      //     this.$message.success("修改成功");
      //   });
      // });
    },
  },
};
</script>
<style scoped>
.publicfontsize {
  font-size: 18px;
}

.el-icon-plus {
  margin-left: 10%;
}
.el-icon-delete {
  margin-left: 5%;
}
.el-icon-edit {
  margin-left: 5%;
}
.allC {
  display: flex;
}
</style>