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

<template>
  <div class="box">
    <div style="position: relative">
      <div class="contenttitle">
            权限管理 /
            <span class="contenttitleBold"
              >科室设置</span
            >
      </div>
      <div style="display: block; margin-top: 7px; margin-right: 110px">
          <div style=" background-color: #fff; border-radius: 8px;padding:15px">
            <el-table
          :data="natureoptions"
          :height="
                    window.pageHeight < 600 ? 450 : window.pageHeight - 130
                  "
          row-key="id"
          default-expand-all
          :tree-props="{children: 'treeChildren', hasChildren: 'hasChildren'}"
          highlight-current-row
          @row-click="treeclick"
          >
          <el-table-column prop="displayName" label="名称">
            <template slot-scope="scope">
              <span>
                <span class="treeicons">
                    <!-- <i
                        class="el-icon-document-remove"
                        v-if="data.parentId == null"
                      ></i> -->
                    <img style="width:20px;height:20px;vertical-align: sub;" src="@/assets/images/order.png"
                      v-if="!scope.row.parentId" />
                  </span>
                  <span :class="!scope.row.parentId ? 'maxtitle' : 'mintitle'">{{ scope.row.displayName }}</span>
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="id" label="编码"></el-table-column>
          </el-table>
          </div>
      </div>   
                <!-- 按钮区域 -->
          <div style="margin-left: 10px;margin-top: 3%;position: absolute;top: 0;right: 0;">
             <!-- <el-button type="" @click="addll" class="commonbutton">新增</el-button> -->
             <div
            v-if="natureoptions.length == '0' ? true : false"
            style="margin-bottom: 10px"
          >
            <el-button
                  type=""
                  class="commonbutton"
                  @click="append"
                  >添加组织</el-button
                >
             </div>
             <div>
          <el-button type="" @click="addorginiztiom" :disabled="isshow" class="commonbutton"
            >新增同级</el-button
          >
        </div>
        <div style="margin-top: 10px">
          <el-button type="" @click="append" :disabled="isshow" class="commonbutton"
            >新增子级</el-button
          >
        </div>
        <div style="margin-top: 10px">
          <el-button type="" @click="rena" :disabled="isshow" class="commonbutton"
            >编辑</el-button
          >
        </div>
        <div style="margin-top: 10px">
          <el-button type="" @click="deleates" :disabled="isshow" class="deleteButton"
            >删除</el-button
          >
        </div>
          </div>
      
      <!-- 新增组织弹框 -->
      <el-dialog
        :title="title == 2 ? '修改组织' : '新增组织'"
        :visible.sync="dialogVisible"
        width="800px"
        @close="closethiebox"
        :close-on-click-modal="false"
        class="el-dialog__title"
      >
        <!--
        <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,
              expandTrigger: 'hover',
              children: 'treeChildren',
              label: 'displayName',
              value: 'id',
            }"            
            clearable 
            size="small"
          ></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-checkbox
              v-model="isPeis"
              :checked="isPeis"
              @change="checkboxchange"
            ></el-checkbox>
            <!-- <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" ref="ruleForm" :rules="rules">
              <el-form-item label="名称" label-width="80px" prop="displayName">
                <el-input v-model="form.displayName" ref="refinput" size="small"></el-input>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false" class="difference">取 消</el-button>
          <el-button
            type="primary"
            @click="organizationtreeaddoredit"
            class="commonbutton"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import {
  organizationtree,
  organizationcaeatre,
  deleteschema,
  modifyedit,
} from "../../request/ruquset";
import { postapi, putapi, getapi } from "@/api/api";
import { tcdate, } from "../../utlis/proFunc";

export default {
  data() {
    return {
      showcheckbox: false,
      isPeis: true,
      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: "",
      row:{},
      isshow:true,
      rules: {
        displayName: [
          { required: true, message: "请输入名称", trigger: "blur" },
        ]
      },
    };
  },
  mounted() {
    this.getonorganization();
  },
  computed: {
    ...mapState(["window"]),
  },
  methods: {
    checkboxchange(v) {
      if (v == true) {
        this.form.isPeis = "Y";
      } else {
        this.form.isPeis = "N";
      }
    },
    cascaderchang(v) {
      this.departmentnames = v[v.length - 1];
      // window.sessionStorage.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() {
      this.$refs.ruleForm.validate((v) => {
        if (v) {
                if (this.title == 1) {
          if (this.form.parentId == "") {
            postapi("/api/app/organization-units/creatre", {
              displayName: this.form.displayName,
              isPeis: this.form.isPeis,
            }).then((res) => {
              if (res.code != -1) {
                this.dialogVisible = false;
                this.form.displayName = "";
                this.getonorganization();
                //this.$message.success('新增成功')
                this.isshow=true
              }
            });
          } else {
            postapi("/api/app/organization-units/creatre", {
              displayName: this.form.displayName,
              isPeis: this.form.isPeis,
              parentId: this.form.parentId,
            }).then((res) => {
              if (res.code != -1) {
                this.dialogVisible = false;
                this.form.displayName = "";
                this.getonorganization();
                //this.$message.success('新增成功')
                this.isshow=true
              }
            });
          }
      } 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 != -1) {
            this.dialogVisible = false;
            this.getonorganization();
            //this.$message.success('编辑成功')
            this.isshow=true
          }
        });
      } else if (this.title == 3) {
          postapi("/api/app/organization-units/creatre", {
            displayName: this.form.displayName,
            isPeis: this.form.isPeis,
            parentId: this.form.parentId,
          }).then((res) => {
            if(res.code!=-1){
              this.dialogVisible = false;
            // this.form = {};
            this.form.displayName = "";
            // this.form.isPeis = "N";
            this.getonorganization();
            //this.$message.success('新增成功')
            this.isshow=true
            }
          });
      }
        }
    })
    },
    check(data) {
      window.sessionStorage.setItem("dataidkes", data.id);
      //  this.$refs.tree.getCheckedKeys()
    },
    treeclick(row) {
      this.row=row
      this.isshow=false
    },
    getonorganization() {
      organizationtree().then((res) => {
        if(res.code!=-1){
          this.natureoptions = res.data;
        }
      });
    },
    //添加父级组织
    addorginiztiom(node, data) {
      this.form=this.$options.data().form
      // Object.assign(this.$data.form, this.$options.data().form);
      this.form.parentId=this.row.parentId
      this.dialogVisible = true;
      this.title = 1;
      if (this.$refs.ruleForm !== undefined) {
          this.$refs.ruleForm.resetFields();
      }
      this.$nextTick(() => {
        this.$refs.refinput.focus();
      });
    },
    //新增组织组织
    append() {
      // 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);
      // }

      // Object.assign(this.$data.form, this.$options.data().form);
      this.form=this.$options.data().form
      if (this.title == 3) {
              this.form.parentId = this.row.id;
      this.dialogVisible = true;
      }
      if (this.$refs.ruleForm !== undefined) {
          this.$refs.ruleForm.resetFields();
      }
      this.$nextTick(() => {
        this.$refs.refinput.focus();
      });
    },
    //删除组织
    deleates() {
      let id=this.row.id
      this.$confirm("是否确定删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        cancelButtonClass:"difference",
        confirmButtonClass:"commonbutton"
      }).then((res) => {
        deleteschema(id).then((res) => {
          if (res.code != -1) {
            this.getonorganization();
             this.isshow=true
            //this.$message.success('删除成功')
          }
        });
      });
    },
    //编辑组织这里
    rena() {
      if (this.row.parentId == null) {
        this.isPeis = true;
      } else {
        this.isPeis = false;
      }

      let a = this.row.parentId;
      if (a == undefined) {
        this.departmentname = "已是最上级";
      } else {
        this.departmentname = a;
      }

      // this.departmentname = a;
      // this.departmentname = window.sessionStorage.getItem("departmentname");
      this.dialogVisible = true;
      this.title = 2;
      // this.selecttable.push(data);

      this.showcheckbox = true;
      this.form = this.row;
      this.form.isPeis = "N";

      this.isPeis = false;
      if (this.$refs.ruleForm !== undefined) {
        this.$refs.ruleForm.resetFields();
      }
      //体检中心
      getapi(`/api/app/organization-units?Id=${this.row.id}`).then((res) => {
        if(res.code!=-1){
          this.form=res.data
          if (res.data.isPeis == "Y") {
          this.isPeis = true;
        }
        }
        // console.log(res,'查询');
      });

      getapi(
        `/api/app/organizationunit/getbycodeparent?medicalCenterId=${this.row.id}`
      ).then((res) => {
        if(res.code!=-1){
          this.selecttable = res.data;
        tcdate(this.selecttable) 
        }
      });
      // 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)
      //     console.log("修改成功");
      //   });
      // });
    },
  },
};
</script>
<style scoped>
@import "../../assets/css/global_button.css";
@import "../../assets/css/global_dialog.css";
@import "../../assets/css/global_table.css";
@import "../../assets/css/global_form.css";
@import "../../assets/css/global_input.css";
@import "../../assets/css/global.css";
.box {
  display: flex;
  flex-direction: column;
}
.layeredleftright {
  width: 100%;
  display: flex;
  flex-direction: column;
}
:deep .el-form-item {
  margin-bottom: 14px;
}
/* el-dialog的头部样式 */
:deep .el-dialog__header {
  padding: 11px 20px 11px;
}
/* el-dialog的主体样式 */
:deep .el-dialog__body {
  padding: 0px 20px 0px;
}
/* el-divider样式 */
:deep .el-divider--horizontal {
  margin: 0px 0 12px;
}
/* el-dialog的底部样式 */
:deep .el-dialog__footer {
  padding: 0px 20px 14px;
}
:deep .el-table tr{
  height: 35px;
}
</style>