baianxi_admin/src/views/company/Grid.vue

<style lang="scss">
.staff {
  display: flex;
  justify-content: space-between;
  .companies {
    height: 75vh;
    overflow: auto;
    margin-right: 10px;
    overflow-x: hidden;
  }
  & > li {
    width: 30%;
    list-style: none;
    min-height: 70vh;
    background: #fff;
    border: 1px solid #d9d9d9;
    padding: 20px 10px;
  }
  .custom-tree-node {
    width: 100%;
    .el-tree-node__content {
      height: 32px;
    }
    .label_name {
      font-size: 14px;
    }
    .active {
      color: #1989fa;
    }
    .edit {
      float: right;
      i {
        font-weight: bolder;
        font-size: 14px;
      }
    }
  }
  .staff_list {
    width: 68%;
    .grid_item {
      height: 60vh;
      border: 1px solid #ccc;
      text-align: center;
      .el-input--mini {
        width: 90%;
        margin-top: 10px;
        padding-right: 5px;
      }
      .el-button--primary {
        width: 90%;
        margin-top: 20px;
      }
    }
  }
}
.staffs {
  margin-right: 10px;
}
// 企业端
.qy_content {
  background: #151932;
  width: 100%;
  height: 90vh;
  margin-top: 10px;
  .grid-item {
    padding: 20px;
    color: #fff;
  }
  .intro {
    height: 90vh;
    overflow-y: scroll;
    line-height: 25px;
  }
}
.w-e-text-container {
  height: 600px;
}
.bg-color-blue {
  color: #fff;
  background-color: #388cff;
}
.org-tree-container {
  background: none;
}
.gridDetail {
  .el-dialog__header {
    background: #2d3a67;
    .el-dialog__title {
      color: #fff;
    }
  }
  .el-dialog__body {
    background: #2d3a67;
    padding: 10px 20px;
    table {
      td {
        padding: 10px;
        color: #fff;
        text-align: center;
        img {
          border-radius: 3px;
        }
        h4 {
          color: #30ceee;
        }
      }
    }
  }
  .el-dialog__footer {
    background: #2d3a67;
  }
}
.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
</style>
<template>
  <section>
    <p>公司管理 > 网格化管理</p>
    <!-- 管理员端 -->
    <div v-if="utype == 0">
      <div class="content">
        <ul class="staff">
          <li class="companies">
            <el-form size="small">
              <el-form-item>
                <el-input
                  suffix-icon="el-icon-search"
                  v-model="name"
                  @change="getData"
                  placeholder="公司名称"
                ></el-input>
              </el-form-item>
            </el-form>
            <el-tree
              :data="data"
              node-key="id"
              :props="props"
              :expand-on-click-node="false"
            >
              <span
                class="custom-tree-node"
                slot-scope="{ node, data }"
                @click="change(data)"
              >
                <span v-if="id == data.id" class="label_name active">{{
                  node.label
                }}</span>
                <span v-else class="label_name">{{ node.label }}</span>
              </span>
            </el-tree>
          </li>
          <li class="staff_list">
            <el-form
              label-width="70px"
              :inline="true"
              size="small"
              label-position="left"
            >
              <el-form-item>
                <el-button
                  icon="el-icon-plus"
                  @click="getEnterpriseInfo"
                  type="primary"
                  size="mini"
                  >安全生产网格化管理简介</el-button
                >
                <el-button
                  @click="getEnterpriseInfo"
                  type="primary"
                  size="mini"
                  >导入组织机构</el-button
                >
              </el-form-item>
            </el-form>
            <div>
              <!-- 暂时注释 -->
              <!-- <div class="grid_item" style="width: 15%">
                <div
                  style="position: relative"
                  v-for="item in gridList"
                  :key="item.id"
                >
                  <el-input
                    v-model="item.label"
                    placeholder="请输入"
                    size="mini"
                  >
                    <el-button
                      slot="append"
                      icon="el-icon-edit"
                      size="mini"
                      @click="editGridDetail(item)"
                    ></el-button>
                  </el-input>
                  <i
                    class="el-icon-arrow-right"
                    style="
                      position: absolute;
                      top: 15px;
                      right: 1px;
                      cursor: pointer;
                    "
                  ></i>
                </div>
                <el-button type="primary" size="mini">添加</el-button>
              </div> -->
              <el-tree
                :data="gridList"
                node-key="id"
                default-expand-all
                :expand-on-click-node="false">
                <span class="custom-tree-node" slot-scope="{ node, data }">
                  <span>{{ node.label }}</span>
                  <span>
                    <!-- <el-button
                      type="text"
                      size="mini"
                      @click="() => append(data)">
                      Append
                    </el-button> -->
                    <el-button
                      type="text"
                      size="mini"
                      @click="() => editGridDetail(node, data)">
                      编辑
                    </el-button>
                  </span>
                </span>
              </el-tree>
            </div>
          </li>
        </ul>
      </div>
      <el-dialog
        :title="'编辑' + curItem.label"
        :visible.sync="dialogFormVisible1"
        width="1000px"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
      >
        <el-form size="small" label-width="120px">
          <el-row :gutter="10">
            <el-col :span="8">
              <el-form-item label="负责人姓名">
                <el-input
                  v-model="form1.charge_person_name"
                  placeholder="请输入负责人姓名"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="负责人电话">
                <el-input
                  v-model="form1.charge_person_phone"
                  placeholder="请输入负责人手机号"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="车牌号">
                <el-input
                  v-model="form1.car_number"
                  placeholder="仅配送相关职位填写"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="负责人照片">
                <div class="upload_div">
                  <i
                    v-if="form1.charge_person_photo"
                    @click="form1.charge_person_photo = ''"
                    class="el-icon-delete"
                  ></i>
                  <i class="el-icon-upload"></i>
                  <img
                    v-if="form1.charge_person_photo"
                    width="100%"
                    height="100%"
                    :src="form1.charge_person_photo"
                    alt=""
                  />
                  <input
                    accept="image/png,image/jpg"
                    @change="upload('charge_person_photo')"
                    id="charge_person_photo"
                    type="file"
                  />
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="证件类型">
                <div class="upload_div">
                  <i
                    v-if="form1.certificate"
                    @click="form1.certificate = ''"
                    class="el-icon-delete"
                  ></i>
                  <i class="el-icon-upload"></i>
                  <img
                    v-if="form1.certificate"
                    width="100%"
                    height="100%"
                    :src="form1.certificate"
                    alt=""
                  />
                  <input
                    accept="image/png,image/jpg"
                    @change="upload('certificate')"
                    id="certificate"
                    type="file"
                  />
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="责任清单">
            <!-- <el-input
              type="textarea"
              v-model="form1.duty_list"
              placeholder=""
              rows="10"
            ></el-input> -->
            <fuEditor v-model="form1.duty_list" :isClear="isClear"></fuEditor>
          </el-form-item>
          <el-form-item label="履职清单">
            <!-- <el-input
              type="textarea"
              v-model="form1.job_list"
              placeholder=""
              rows="10"
            ></el-input> -->
            <fuEditor v-model="form1.job_list" :isClear="isClear"></fuEditor>
          </el-form-item>
          <el-form-item label="部门职责">
            <!-- <el-input
              type="textarea"
              v-model="form1.depart_list"
              placeholder=""
              rows="10"
            ></el-input> -->
            <fuEditor v-model="form1.depart_list" :isClear="isClear"></fuEditor>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button size="small" @click="dialogFormVisible1 = false"
            >取 消</el-button
          >
          <el-button size="small" type="primary" @click="saveGridDetail"
            >确 定</el-button
          >
        </div>
      </el-dialog>
      <el-dialog
        title="安全生产网格化管理简介"
        :visible.sync="dialogFormVisible2"
      >
        <div>
          <fuEditor v-model="form.grid_security" :isClear="isClear"></fuEditor>
        </div>
        <div slot="footer">
          <el-button @click="dialogFormVisible2 = false">取 消</el-button>
          <el-button type="primary" @click="updateEnterprise">确 定</el-button>
        </div>
      </el-dialog>
    </div>

    <!-- 企业端 -->
    <div class="qy_content" v-else>
      <el-row :gutter="10">
        <el-col :span="12">
          <div
            class="grid-item intro"
            v-html="enterpriseInfo.grid_security"
          ></div>
        </el-col>
        <el-col :span="12">
          <div class="grid-item grid_chart">
            <h2 align="center" style="margin-bottom: 10vh">
              安全生产管理"一网通"
            </h2>
            <vue2-org-tree
              :data="treeData"
              :label-class-name="labelClassName"
              @on-node-click="nodeClick"
            />
          </div>
        </el-col>
      </el-row>
      <el-dialog
        title="责任详情"
        :visible.sync="dialogFormVisible3"
        width="600px"
        class="gridDetail"
      >
        <div>
          <table width="100%" border="1" cellspacing="0" cellpadding="0">
            <tr>
              <td style="text-align: left; padding-left: 10px">
                <p>姓名：</p>
                <p>{{ form1.charge_person_name }}</p>
              </td>
              <td rowspan="2">
                <img :src="form1.charge_person_photo" width="80" alt="" />
              </td>
              <td rowspan="2">
                <img :src="form1.certificate" width="180" alt="" />
              </td>
            </tr>
            <tr>
              <td style="text-align: left; padding-left: 10px">
                <p>手机：</p>
                <p>{{ form1.charge_person_phone }}</p>
              </td>
            </tr>
            <tr>
              <td colspan="3">
                <h4 align="left" style="">责任清单</h4>
                <div style="height: 200px" v-html="form1.duty_list">
                </div>
              </td>
            </tr>
            <tr>
              <td colspan="3">
                <h4 align="left" style="">履职清单</h4>
                <div style="height: 200px" v-html="form1.job_list">
                </div>
              </td>
            </tr>
            <tr>
              <td colspan="3">
                <h4 align="left" style="">部门职责</h4>
                <div style="height: 200px" v-html="form1.depart_list">
                </div>
              </td>
            </tr>
          </table>
        </div>
        <div slot="footer">
          <el-button @click="dialogFormVisible3 = false" size="mini"
            >取 消</el-button
          >
          <el-button
            type="primary"
            @click="dialogFormVisible3 = false"
            size="mini"
            >确 定</el-button
          >
        </div>
      </el-dialog>
    </div>
  </section>
</template>
<script>
import Page from "../../components/Page";
import fuEditor from "@/components/fuEditor/index.vue";
export default {
  components: {
    Page,
    fuEditor,
  },
  data() {
    return {
      isClear: false,
      dialogFormVisible: false,
      dialogFormVisible1: false,
      dialogFormVisible2: false,
      dialogFormVisible3: false,
      data: [],
      form: { page: 1, page_size: 20 },
      list: [],
      total: 1,
      loading: false,
      props: {
        label: "name",
      },
      id: "",
      dpt: { enterprise_name: "", enterprise_id: "", staffusers: [] },
      enterprise_name: "",
      name: "",
      staff: {},
      dptList: [],
      form1: {},
      gridList: [],
      utype: localStorage.getItem("utype", 0),
      treeData1: {
        value: 0,
        label: "公司主要负责人",
        children: [
          {
            value: 2,
            label: "安全科",
            children: [
              {
                value: 5,
                label: "仓库运行班",
                children: [
                  {
                    value: 7,
                    label: "储存员",
                  },
                  {
                    value: 11,
                    label: "搬运员",
                  },
                  {
                    value: 12,
                    label: "守护员",
                  },
                ],
              },
              {
                value: 6,
                label: "销售科",
                children: [
                  {
                    value: 12,
                    label: "甲销售员",
                  },
                  {
                    value: 12,
                    label: "乙销售员",
                  },
                ],
              },
              {
                value: 9,
                label: "配送队",
                children: [
                  {
                    value: 12,
                    label: "甲配送员",
                  },
                  {
                    value: 12,
                    label: "乙配送员",
                  },
                ],
              },
            ],
          },
        ],
      },
      enterpriseInfo: {},
      labelClassName: "bg-color-blue",
      curItem: {},
      treeData: {},
      gridDetail: {},
    };
  },
  methods: {
    getEnterpriseInfo() {
      this.$api.getEnterprise({ id: this.form.enterprise_id }).then((res) => {
        this.dialogFormVisible2 = true;
        this.form.grid_security = res.data.data.grid_security;
        this.enterpriseInfo = res.data.data;
      });
    },
    updateEnterprise() {
      let params = {
        id: this.form.enterprise_id,
        grid_security: this.form.grid_security,
        name: this.form.enterprise_name,
      };
      this.$api.updateEnterprise(params).then((res) => {
        this.dialogFormVisible2 = false;
      });
    },
    gopage(size) {
      if (size) {
        this.form.page_size = size;
      }
      this.form.page = this.$refs.pageButton.page;
      this.getData();
    },
    change(data) {
      this.id = data.id;
      this.enterprise_name = data.name;
      this.getDpt();
      // this.$api.getDepartmentList({ enterprise_id: data.id }).then((res) => {
      //   this.dptList = res.data.data.list;
      // });
      this.form.enterprise_id = data.id;
      this.form.enterprise_name = data.name;
      this.$api.getEnterprise({ id: this.form.enterprise_id }).then((res) => {
        this.form.grid_security = res.data.data.grid_security;
        this.enterpriseInfo = res.data.data;
      });
      // 机构树
      this.$api.getGridTree({ enterprise_id: this.id }).then((res) => {
        this.treeData = res.data.data;
        if (res.data.data) {
          this.gridList =
            typeof res.data.data == "object" ? [res.data.data] : res.data.data;
        }
      });
    },
    getData() {
      this.loading = true;
      this.$api.getEnterpriseList({ name: this.name }).then((res) => {
        this.data = res.data.data.list;
        this.change(this.data[0]);
      });
    },
    //获取员工列表
    getDpt() {
      var parm = this.form;
      parm.enterprise_id = this.id;
      // this.$api.getStaffuserList(parm).then((res) => {
      //   this.loading = false;
      //   this.list = res.data.data.list;
      //   this.total = res.data.data.total;
      // });
    },
    del(id) {
      this.$confirm("确定删除吗", "提示", {
        type: "warning",
      }).then(() => {
        this.$api.deleteStaffuser({ id: id }).then((res) => {
          this.$message({
            message: "删除成功",
            type: "success",
          });
          this.getDpt();
        });
      });
    },
    saveGridDetail() {
      let params = this.form1;
      params.enterprise_grid_id = this.curItem.id;
      if (params.id) {
        this.$api.updateGridDetail(params).then((res) => {
          if (res.data.code != 0) {
            this.$message.error(res.data.message);
          }
          this.dialogFormVisible1 = false;
        });
      } else {
        this.$api.addGridDetail(params).then((res) => {
          if (res.data.code != 0) {
            this.$message.error(res.data.message);
          }
          this.dialogFormVisible1 = false;
        });
      }
    },
    handleClose(index) {
      this.dpt.staffusers.splice(index, 1);
    },
    edit(data) {
      this.dialogFormVisible1 = true;
      this.staff = { ...data };
    },
    editGridDetail(node,item) {
      if (!item.label) {
        this.$message.error("请先填写名称再编辑!");
        return;
      }
      this.dialogFormVisible1 = true;
      this.curItem = item;
      this.$api.getGridDetail({ id: item.id }).then((res) => {
        this.form1 = res.data.data?res.data.data:{};
      });
    },
    upload(type) {
      var file = document.getElementById(type).files;
      var data = new FormData();
      data.append("file", file[0]);
      this.$api.uploadFile(data).then((res) => {
        if (res.data.code == 0) {
          let form = this.form1;
          this.$set(form, type, res.data.data.url);
          this.$message({ message: "上传成功！", type: "success" });
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    nodeClick(e, data) {
      this.$api.getGridDetail({ id: data.value }).then((res) => {
        this.form1 = res.data.data;
        this.dialogFormVisible3 = true;
      });
    },
  },
  created() {
    this.getData();
  },
};
</script>