cameraTree.vue

<template>
  <div>
    <el-tree
      class="filter-tree"
      accordion
      :data="treeData"
      :props="defaultProps"
      @node-click="handleNodeClick"
      :expand-on-click-node="false"
      :filter-node-method="filterNode"
      ref="catree"
    >
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>
          <span
            class="tree-label"
            v-if="data.label || data.label == ''"
            >{{ data.label == "" ? "未命名" : data.label }}</span
          >
          <span class="tree-label" v-else-if="!data.label">{{
            data.vchan_name == "" ? "未命名" : data.vchan_name
          }}</span>
        </span>
        <span class="tree-btn" v-if="(data.label || data.label == '') && data.vtype ? false:true" >
          <i class="el-icon-plus" @click.stop="nodeAddClick(node, data)"></i>
          <i
            class="el-icon-edit"
            @click.stop="nodeEditClick(node, data)"
            v-if="data.org_type != 'root'"
          ></i>
          <i 
            class="el-icon-delete"
            @click.stop="nodeDelClick(node, data)"
            v-if="data.org_type != 'root'"
          ></i>
        </span>
      </span>
    </el-tree>
    <el-dialog title="添加" :visible.sync="addVisible" width="450px">
      <div>
        <el-form
          label-position="left"
          label-width="120px"
          :model="formData"
          :rules="rules"
          ref="addForm"
          hide-required-asterisk
        >
          <el-form-item label="添加目标类型">
            <el-select
              v-model="formData.targetType"
              placeholder="请选择"
              :popper-append-to-body="false"
            >
              <el-option
                :key="item.value"
                :label="item.label"
                :value="item.value"
                v-for="item in targetOpt"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <div v-if="formData.targetType == 'org'">
            <el-form-item label="组织编号">
              <el-input v-model="formData.code"></el-input>
            </el-form-item>
            <el-form-item label="组织名称" prop="name">
              <el-input v-model="formData.name"></el-input>
            </el-form-item>
          </div>
          <div v-else-if="formData.targetType == 'address'">
            <el-form-item label="地点编号">
              <el-input v-model="formData.code"></el-input>
            </el-form-item>
            <el-form-item label="地点名称" prop="name">
              <el-input v-model="formData.name"></el-input>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 编辑dialog -->
    <el-dialog title="修改" :visible.sync="editVisible" width="450px">
      <div>
        <el-form
          label-position="left"
          label-width="120px"
          :model="editForm"
          :rules="rules"
          hide-required-asterisk
          ref="editForm"
        >
          <div v-if="editForm.targetType == 'org'">
            <el-form-item label="组织编号">
              <el-input v-model="editForm.code" disabled></el-input>
            </el-form-item>
            <el-form-item label="组织名称" prop="name">
              <el-input v-model="editForm.name"></el-input>
            </el-form-item>
          </div>
          <div v-else-if="editForm.targetType == 'address'">
            <el-form-item label="地点编号">
              <el-input v-model="editForm.code" disabled></el-input>
            </el-form-item>
            <el-form-item label="地点名称" prop="name">
              <el-input v-model="editForm.name"></el-input>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editVisible = false">取 消</el-button>
        <el-button type="primary" @click="editFinish">确 定</el-button>
      </span>
    </el-dialog>
    <addCamera ref="addCamera" @getAllData="addCamareAfterGet"></addCamera>
  </div>
</template>

<script>
import addCamera from "./cameraDialog";
export default {
  data() {
    return {
      formData: {
        targetType: "org"
      },
      editForm: {
        targetType: "",
        name: "",
        code: ""
      },
      addVideoParam: {},
      treeData: [
        {
          unid: "0",
          org_pid: "0",
          label: "手动添加相机资源",
          type: "root",
          org_type: "root",
          children: []
        }
      ],
      currentNodeId: "",
      defaultProps: {
        children: "children",
        disabled: "disabled",
        label: "label"
      },
      addVisible: false,
      editVisible: false,
      targetOpt: [],
      rules: {
        name: [
          { required: true, message: "请输入名称", trigger: "blur" },
          { min: 2, max: 9, message: "长度在 2 到 9 个字符", trigger: "blur" }
        ]
      },
      dev_unid: localStorage.getItem("dev_unid")
    };
  },
  components: {
    addCamera
  },
  props: {
    filterText: {
      type: String,
      default: ""
    },
    treeDatas: {
      type: Array,
      defalut: []
    }
  },
  watch: {
    filterText(val) {
      this.$refs.catree.filter(val);
    },
    treeDatas(val) {
      this.treeData[0].children = val;
    }
  },
  methods: {
    addCamareAfterGet(data) {
      this.$emit("getData", data);
    },
    handleNodeClick(data) {
      this.$emit("clickHandle", data, "camera");
    },
    nodeDelClick(node, data) {
      this.$confirm("此操作将永久删除该选项, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let cate_unid = this.getCustomCate("组织", "residence");
          this.$api.resource
            .getCode(
              {
                limit: 9999
              },
              cate_unid
            )
            .then(res => {
              let editObj = [];
              editObj = res.list_data.filter(
                item => item.code == data.org_code
              );
              this.$api.resource
                .delCode({}, cate_unid, editObj[0].unid)
                .then(res => {});
              this.$api.resource.delOrg({}, data.unid).then(res => {
                if (!res.enote) {
                  this.$message({
                    type: "success",
                    message: "删除成功!"
                  });
                  this.$emit("getTree");
                }
              });
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    nodeEditClick(node, data) {
      this.editForm.targetType = data.org_type;
      this.editForm.code = data.org_code;
      this.editForm.name = data.org_name;
      this.editVisible = true;
    },
    editFinish() {
      this.$refs["editForm"].validate(valid => {
        if (valid) {
          let cate_unid = this.getCustomCate("组织", "residence");
          this.$api.resource
            .getCode(
              {
                limit: 9999
              },
              cate_unid
            )
            .then(res => {
              let editObj = [];
              editObj = res.list_data.filter(
                item => item.code == this.editForm.code
              );
              this.$api.resource
                .editCamera(
                  {
                    name: this.editForm.name,
                    code: this.editForm.code
                  },
                  cate_unid,
                  editObj[0].unid
                )
                .then(data => {
                  if (res.ecode) {
                    this.$message({
                      type: "error",
                      message: res.enote
                    });
                  } else {
                    this.editVisible = false;
                    this.$emit("getTree");
                  }
                });
            });
        } else {
          return false;
        }
      });
    },
    nodeAddClick(node, data) {
      if (data.org_type == "address") {
        //添加视频
        this.$refs.addCamera.initDialog(node, "add", this.dev_unid);
      } else {
        //添加组织关系
        this.currentNodeId = data.unid;
        this.formData = {
          targetType: "org",
          name: "",
          code: ""
        };
        if (data.org_type === "root") {
          this.targetOpt = [
            {
              label: "组织",
              value: "org"
            }
          ];
        } else if (data.org_type === "org") {
          this.targetOpt = [
            {
              label: "组织",
              value: "org"
            },
            {
              label: "地点",
              value: "address"
            }
          ];
        } else {
          this.targetOpt = [
            {
              label: "地点",
              value: "address"
            }
          ];
        }
        this.addVisible = true;
      }
    },
    getCustomCate(name, cate) {
      let localKey = name + "-" + cate;
      return window.localStorage.getItem(localKey);
    },
    save() {
      this.$refs["addForm"].validate(valid => {
        if (valid) {
          let cate_unid = this.getCustomCate("组织", "residence");
          // console.log('添加节点分类unid:', cate_unid);
          if (cate_unid) {
            this.$api.resource
              .addCode(
                {
                  code: this.formData.code,
                  name: this.formData.name
                },
                cate_unid
              )
              .then(res => {
                if (res.ecode) {
                  this.$message({
                    type: "error",
                    message: res.enote
                  });
                } else {
                  this.orgServ(); // org service
                }
              });
          }
        } else {
          return false;
        }
      });
    },
    orgServ() {
      this.$api.resource
        .addNode({
          org_pid: this.currentNodeId,
          org_type: this.formData.targetType,
          org_code: this.formData.code,
          is_leaf: false
        })
        .then(res => {
          if (res.ecode) {
            this.$message({
              type: "error",
              message: res.enote
            });
          } else {
            this.$message({
              type: "success",
              message: "添加成功!"
            });
            this.addVisible = false;
            this.$emit("getTree");
          }
        });
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    }
  }
};
</script>

<style></style>