spfm-market-front/src/pages/main/userImage/labelList.vue

<template>
  <div class="container">
    <fullscreen :fullscreen.sync="fullscreen" class="container-box">
      <div class="titbox">
        <h2 class="font-ui">用户投诉标签管理</h2>
        <div>
          <i class="el-icon-refresh" @click="iconCli(1)"></i>
          <i class="el-icon-full-screen" @click="iconCli(2)"></i>
          <!--                    <i class="el-icon-folder-opened"></i>-->
          <!--                    <i class="el-icon-view"></i>-->
          <!--                    <i class="el-icon-more"></i>-->
        </div>
      </div>
      <div class="search">
        <mySearch :searchList="searchList" @searchInfo="searchInfo"></mySearch>
        <el-button
          class="btn-check"
          size="medium"
          type="primary"
          @click="addRule()"
          >添加
        </el-button>
      </div>
      <div class="tabbox">
        <el-table
          height="calc(100% - 40px)"
          v-loading="loading"
          class="com-table"
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          size="small"
          border
          style="width: 100%"
        >
          <el-table-column prop="roleCode" label="标签名称"> </el-table-column>
          <el-table-column prop="roleName" label="配置工号"> </el-table-column>
          <el-table-column prop="opName" label="配置姓名"> </el-table-column>
          <el-table-column prop="opName" label="配置时间"> </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                plain
                @click="updateUser(scope.row)"
                >编辑</el-button
              >
              <el-button
                size="mini"
                type="danger"
                plain
                @click="delLine(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          class="pageBox"
          @current-change="currchange"
          layout="prev, pager, next"
          background
          :total="total"
        >
        </el-pagination>
      </div>
    </fullscreen>
    <el-dialog
      :title="titname"
      :visible.sync="dialogStatus"
      width="50%"
      :close-on-press-escape="false"
      :show-close="false"
      :destroy-on-close="true"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
    >
      <p-form
        ref="pForm"
        @closeDialog="closeDialog"
        :formData="formData"
        :form="form"
      ></p-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetUser('ruleForm')">取 消</el-button>
        <el-button v-show="subBtn" @click="subUser('ruleForm')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import pForm from "../../../components/p-form";
import mySearch from "../../../components/search";

export default {
  components: {
    mySearch,
    pForm,
  },
  data() {
    return {
      loading: false,
      defaultProps: {
        children: "children",
        label: "functionName",
      },
      menuStatus: false,
      formData: {
        roleName: "",
        id: "",
      },
      form: {
        action: false,
        formName: "ruleForm",
        labelWidth: "80px",
        formStyle: "width: 80%; margin: 0 auto",
        initUrl: "/sysmgr/sys/login/addInit", // 初始化接口
        url: "", // 提交接口
        id: "", // 编辑时用的id 由初始化时获取
        type: "post", // 请求方式
        params: "", // get请求桉树
        events: function () {
          // 回调方法
          //   $vm.$router.push("/leader");
        },
        body: [
          // 渲染表单
          {
            el: "input", //  dom类型
            placeholder: "请输入标签名称", // 提示语
            label: "标签名称", // 表单title
            value: "roleName", // 表单model绑定的值
            disabled: false,
            clearable: true,
            rules: [
              // 校验
              {
                required: true,
                message: "请输入标签名称",
                trigger: "blur",
              },
            ],
          },
        ],
      },
      inputType: "password",
      subBtn: true,
      fullscreen: false,
      total: 0,
      pageSize: 1,
      tableData: [],
      dialogStatus: false,
      titname: "",
      disableStatus: false,
      searchList: [
        {
          type: "input",
          tit: "标签名称",
          value: "",
          width: "100%",
          options: [],
        },
        {
          type: "input",
          tit: "配置工号",
          value: "",
          width: "100%",
          options: [],
        },
      ],
      params: {},
      checkedMenu: [], // 选中节点的functionCode
      checkedNodes: [], // 选中节点的node值
      roleData: "", // 某一条数据
    };
  },
  methods: {
    // 提交
    subMenu() {
      this.$http({
        url: "/sysmgr/sys/settings/sysRoleFuncs/updateFunc",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          roleCode: this.roleData.roleCode,
          roleName: this.roleData.roleName,
          funcList: this.checkedNodes,
        },
      }).then((res) => {
        if (res.data.result == 0) {
          this.$notify({
            title: "成功",
            message: res.data.desc,
            type: "success",
          });
          this.menuStatus = false;
          this.getList(this.params, this.pageSize);
        }
      });
    },
    // 修改弹窗
    updateUser(val) {
      this.titname = "修改角色";
      this.subBtn = true;
      this.$http({
        url: "/sysmgr/sys/settings/sysRoleInfo/query",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          id: val.id,
          roleCode: "",
          roleName: "",
        },
      }).then((res) => {
        this.formData = res.data;
      });
      this.dialogStatus = true;
    },
    // 增加表单处理
    subUser(formName) {
      this.titname == "修改角色"
        ? (this.form.url = "/sysmgr/sys/settings/sysRoleInfo/update")
        : (this.form.url = "/sysmgr/sys/settings/sysRoleInfos/add");
      this.$refs.pForm.submitForm(this.form.formName);
    },
    // 取消提交
    resetUser() {
      this.$refs.pForm.resetForm(this.form.formName);
    },
    closeDialog() {
      console.log("adasd");
      this.dialogStatus = false;
      this.getList(this.params, this.pageSize);
    },
    // 增加弹窗
    addRule() {
      this.titname = "增加角色";
      this.subBtn = true;
      this.dialogStatus = true;
    },
    //搜索数据
    searchInfo(v) {
      this.params = {};
      v[0] ? (this.params.roleName = v[0]) : "";
      this.getList(this.params, this.pageSize);
    },
    //获取列表
    getList(v, n) {
      this.pageSize = n;
      this.loading = true;
      this.$http({
        url: "/sysmgr/sys/settings/sysRoleInfo/queryPage",
        method: "post",
        headers: {
          "Content-Type": "application/json",
          page: '{"pageNo":"' + n + '","pageSize":"10"}',
        },
        data: v,
      }).then((res) => {
        this.loading = false;
        this.tableData = res.data.data;
        this.total = res.data.totalRecord;
      });
    },
    //功能栏
    iconCli(v) {
      if (v === 1) {
        this.getList(this.params, this.pageSize);
      }
      if (v === 2) {
        this.fullscreen = !this.fullscreen;
      }
    },
    // 分页
    currchange(v) {
      this.pageSize = v;
      this.getList(this.params, this.pageSize);
    },
    //删除
    delLine(v) {
      this.$confirm("即将删除此条数据, 是否删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          console.log(v);
          this.$http({
            url: "/sysmgr/sys/settings/sysRoleInfo/del",
            method: "post",
            headers: {
              "Content-Type": "application/json",
            },
            data: {
              id: v.id,
            },
          }).then((res) => {
            if (res.data.result == 0) {
              this.$notify({
                title: "成功",
                message: res.data.desc,
                type: "success",
              });
              this.getList(this.params, this.pageSize);
            }
          });
        })
        .catch(() => {});
    },
  },
  mounted() {
    this.getList(this.params, this.pageSize);
  },
  created() {},
};
</script>
<style>
.el-input__suffix {
  cursor: pointer;
}
</style>
<style scoped lang="scss">
.titbox {
  div {
    float: right;

    i {
      font-size: 22px;
      margin-left: 20px;
      cursor: pointer;
    }
  }
}

.tabbox {
  margin-top: 15px;
}

.pageBox {
  text-align: right;
  margin-top: 10px;
}
</style>
<style lang="scss">
.tree-line-style {
  .el-tree-node__content {
    padding-left: 0 !important;
  }

  .el-tree-node__expand-icon.is-leaf {
    display: none !important;
  }

  .el-tree-node {
    position: relative;
    padding-left: 16px; // 缩进量
  }

  .el-tree-node__children {
    padding-left: 16px; // 缩进量
  }

  // 竖线
  .el-tree-node::before {
    content: "";
    height: 100%;
    width: 1px;
    position: absolute;
    left: -3px;
    top: -17px;
    border-width: 1px;
    border-left: 1px dashed #52627c;
  }

  // 当前层最后一个节点的竖线高度固定
  .el-tree-node:last-child::before {
    height: 38px; // 可以自己调节到合适数值
  }

  // 横线
  .el-tree-node::after {
    content: "";
    width: 24px;
    height: 20px;
    position: absolute;
    left: -3px;
    top: 20px;
    border-width: 1px;
    border-top: 1px dashed #52627c;
  }

  // 去掉最顶层的虚线，放最下面样式才不会被上面的覆盖了
  & > .el-tree-node::after {
    border-top: none;
  }

  & > .el-tree-node::before {
    border-left: none;
  }

  // 展开关闭的icon
  .el-tree-node__expand-icon {
    font-size: 16px;

    // 叶子节点（无子节点）
    &.is-leaf {
      color: transparent;
      // display: none; // 也可以去掉
    }
  }
}
</style>