baoman / Ezquiz_Platform

  <template>
    <div>

      <back-box>

        <template slot="title">
          <span>账号管理</span>
        </template>

        <template slot="btns">
          <el-tooltip effect="dark" content="添加账号" placement="bottom">
            <el-button
              type="primary"
              icon="el-icon-plus"
              size="mini"
              plain
              circle
              @click="openAddDia"
            ></el-button>
          </el-tooltip>
        </template>

      </back-box>

      <div class="answer-header">
        <div class="sel-box">
          <el-select
            class="sel"
            v-model="query.versionType"
            placeholder="选择账号类型"
            @change="(page = 1), _QueryData()"
          >
            <el-option label="无" :value="0"></el-option>
            <el-option label="标准版" :value="1"></el-option>
            <el-option label="个人版" :value="2"></el-option>
            <el-option label="定制版" :value="3"></el-option>
          </el-select>
          <el-select
            class="sel"
            v-model="query.available"
            placeholder="选择账号状态"
            @change="(page = 1), _QueryData()"
          >
            <el-option label="正常" :value="0"></el-option>
            <el-option label="禁用" :value="1"></el-option>
          </el-select>
          <el-input
            placeholder="请输入账号名称"
            v-model="query.loginName"
            class="input-with-select"
            @keyup.enter.native="(page = 1), _QueryData()"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="(page = 1), _QueryData()"
            ></el-button>
          </el-input>
          <el-button type="primary" round @click="(page = 1), _QueryData()"
            >筛选</el-button
          >
        </div>
      </div>
      <div class="table-box">
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          v-loading="loading"
        >
          <el-table-column
            prop="loginName"
            label="账号"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="realName"
            label="姓名"
            align="center"
          ></el-table-column>
          <el-table-column prop="versionType" label="账号类型" align="center">
            <template slot-scope="scoped">{{
              `${
                scoped.row.versionType == 0
                  ? "无"
                  : scoped.row.versionType == 1
                  ? "标准版"
                  : scoped.row.versionType == 2
                  ? "个人版"
                  : "定制版"
              }`
            }}</template></el-table-column
          >

          <el-table-column prop="usageMode" label="使用模式" align="center">
            <template slot-scope="scoped">{{
              `${
                scoped.row.usageMode == 0
                  ? "专用模式"
                  : scoped.row.usageMode == 1
                  ? "共享模式"
                  : scoped.row.usageMode == 2
                  ? "自由模式"
                  : "--"
              }`
            }}</template></el-table-column
          >

          <el-table-column
            prop="tenantName"
            label="学校名称"
            align="center"
          ></el-table-column>
          <el-table-column prop="available" label="状态" align="center"
            ><template slot-scope="scoped">{{
              `${scoped.row.available == 0 ? "正常" : "禁用"}`
            }}</template></el-table-column
          >
          <el-table-column
            prop="createdTime"
            label="创建时间"
            align="center"
            width="200"
          ></el-table-column>
          <el-table-column label="操作" align="center" width="160">
            <template slot-scope="scoped">
              <el-tooltip content="修改账号" placement="left">
                <el-button
                  class="set-count"
                  type="primary"
                  circle
                  icon="el-icon-edit-outline"
                  size="mini"
                  @click="setCount(scoped.row)"
                ></el-button>
              </el-tooltip>
              <el-dropdown
                trigger="hover"
                @command="handleDropdownClick($event, scoped.row)"
              >
                <el-button
                  type="info"
                  size="mini"
                  circle
                  icon="el-icon-more"
                ></el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item :command="0">重置密码</el-dropdown-item>
                  <el-dropdown-item :command="1">{{
                    `${scoped.row.available == 0 ? "禁用" : "启用"}`
                  }}</el-dropdown-item>

                  <!-- <el-dropdown-item :command="2">删除</el-dropdown-item> -->

                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination-box">
          <el-pagination
            layout="total,prev, pager, next"
            :hide-on-single-page="true"
            :total="total"
            @current-change="changePage"
            :current-page="page"
            :page-size="size"
          >
          </el-pagination>
        </div>

      </div>

      <el-dialog title="修改账号信息" :visible.sync="diaCount" width="400">
        <el-form
          class="form-box"
          :model="formCount"
          :rules="ruleCount"
          ref="formCount"
          label-width="160px"
        >
          <el-form-item label="账号：" prop="loginName">
            <el-col :span="12">
              <el-input
                placeholder="请输入账号"
                v-model.trim="formCount.loginName"
                maxlength="30"
              >
              </el-input>
            </el-col>
          </el-form-item>

          <!-- <el-form-item label="密码：" prop="password">

            <el-col :span="12">
              <el-input
                placeholder="请输入密码"
                v-model.trim="formCount.password"
                maxlength="18"
              >
              </el-input>
            </el-col>

          </el-form-item> -->

          <el-form-item label="联系人姓名：" prop="contactPerson">
            <el-col :span="12">
              <el-input
                placeholder="请输入联系人姓名"
                v-model.trim="formCount.contactPerson"
                maxlength="12"
              >
              </el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="联系人手机号：" prop="contactPhone">
            <el-col :span="12">
              <el-input
                placeholder="请输入联系人手机号"
                v-model.trim="formCount.contactPhone"
                type="number"
                oninput="if(value.length > 11) value = value.slice(0,11)"
              >
              </el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="学校/集团名称：" prop="tenantName">
            <el-col :span="12">
              <el-input
                placeholder="学校/集团名称"
                v-model.trim="formCount.tenantName"
                maxlength="30"
              >
              </el-input>
            </el-col>
          </el-form-item>
        </el-form>
        <div class="dialog-footer" slot="footer">
          <el-button @click="saveCount">确 定</el-button>
          <el-button @click="diaCount = false">取 消</el-button>
        </div>
      </el-dialog>
      <el-dialog title="添加账号" :visible.sync="diaAdd" width="400">
        <el-form
          class="form-box"
          :model="formAddCount"
          :rules="ruleAddCount"
          ref="formAddCount"
          label-width="160px"
        >
          <el-form-item label="请输入账号：" prop="loginName">
            <el-col :span="12">
              <el-input
                placeholder="请输入联系电话"
                v-model.trim="formAddCount.loginName"
                type="number"
                oninput="if(value.length > 11) value = value.slice(0,11)"
              >
              </el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="选择账号类型：" prop="versionType">
            <el-col :span="12">
              <el-select
                class="sel"
                v-model="formAddCount.versionType"
                placeholder="请选择账号类型"

                @change="versionTypeChange"

              >

                <el-option label="标准版" :value="1"></el-option>
                <el-option label="个人版" :value="2"></el-option>
                <el-option label="定制版" :value="3"></el-option>
              </el-select>
            </el-col>
          </el-form-item>
          <el-form-item label="联系人姓名：" prop="contactPerson">

            <el-input
              placeholder="请输入联系人姓名"
              v-model.trim="formAddCount.contactPerson"
              maxlength="12"
            >
            </el-input>

          </el-form-item>
          <el-form-item label="联系人手机号：" prop="contactPhone">
            <el-col :span="12">
              <el-input
                placeholder="请输入联系人手机号"
                v-model.trim="formAddCount.contactPhone"
                type="number"
                oninput="if(value.length > 11) value = value.slice(0,11)"
              >
              </el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="学校/集团名称：" prop="tenantName">
            <el-col :span="12">
              <el-input
                placeholder="学校/集团名称"
                v-model.trim="formAddCount.tenantName"
                maxlength="30"
              >
              </el-input>
            </el-col>
          </el-form-item>

          <el-form-item label="使用模式：" v-if="formAddCount.versionType == 1">
            <el-radio-group v-model="formAddCount.usageMode">

              <el-radio :label="0">专用模式</el-radio>
              <el-radio :label="1">共享模式</el-radio>
              <el-radio :label="2">自由模式 </el-radio>
            </el-radio-group>
          </el-form-item>

        </el-form>
        <div class="dialog-footer" slot="footer">
          <el-button @click="saveAddCount">确 定</el-button>
          <el-button @click="diaAdd = false">取 消</el-button>
        </div>
      </el-dialog>

    </div>
  </template>
  
  <script>

  import { encryptLoginPassword } from "@/utils";

  export default {

    data() {
      return {
        diaAdd: false,
        loading: false,
        diaCount: false,
        props: { multiple: true, checkStrictly: true },
        query: {

          versionType: "",

          available: "",
          loginName: "",
        },
        tableData: [],
        total: 0,
        page: 1,
        size: 20,
        formCount: {

          userId: "",

          loginName: "",

          tenantName: "",
          contactPerson: "",
          contactPhone: "",
        },
        ruleCount: {
          loginName: [{ required: true, message: "请输入账号", trigger: "blur" }],

          // password: [{ required: true, message: "请输入密码", trigger: "blur" }],

          contactPhone: [
            { required: true, message: "请输入联系电话", trigger: "blur" },
          ],
          contactPerson: [
            { required: true, message: "请输入联系人姓名", trigger: "blur" },
          ],
        },
        formAddCount: {
          loginName: "",
          contactPhone: "",
          contactPerson: "",
          versionType: "",
          tenantName: "",

          usageMode: "",

        },
        ruleAddCount: {
          loginName: [{ required: true, message: "请输入账号", trigger: "blur" }],
          contactPhone: [
            { required: true, message: "请输入联系电话", trigger: "blur" },
          ],
          contactPerson: [
            { required: true, message: "请输入联系人姓名", trigger: "blur" },
          ],
          versionType: [
            { required: true, message: "请选择租户类型", trigger: "blur" },
          ],
        },
      };
    },
    created() {

      this._QueryData();

    },
    methods: {
      openAddDia() {
        //添加账号
        this.formAddCount.loginName = "";
        this.formAddCount.contactPhone = "";
        this.formAddCount.contactPerson = "";
        this.formAddCount.tenantName = "";

        this.formAddCount.versionType = 1;

        this.formAddCount.usageMode = "";

        this.diaAdd = true;
      },

      versionTypeChange(){
        this.formAddCount.usageMode = "";
      },

      saveAddCount() {
        //保存新增账号
        this.$refs.formAddCount.validate(async (valid) => {
          if (valid) {
            let params = { ...this.formAddCount };

            const { data, status, info } = await this.$request.addTenant({

              ...params,
            });
            if (status === 0) {
              this.$message.success(info);
              this._QueryData();
              this.diaAdd = false;
            } else {
              this.$message.error(info);
            }
          } else {
            this.$message.warning("输入有误请检查！");
            return false;
          }
        });
      },
      setCount(obj) {
        //修改账号

        this.formCount.userId = obj.id;
        this.formCount.loginName = obj.loginName;
        this.formCount.tenantName = obj.tenantName;
        this.formCount.contactPerson = obj.realName;
        this.formCount.contactPhone = obj.phone;

        this.diaCount = true;
      },
      handleDropdownClick(value, item) {
        console.log(item);
        //更多
        if (value == 2) {
          this.$confirm("确定要删除这条账号信息吗？", "提示", {
            customClass: "del-model",
            cancelButttonText: "取消",
            confirmButtonText: "确定",
            type: "warning",
          }).then(() => {
            this.updateUser(item, value);
          });
        } else {
          this.updateUser(item, value);
        }
      },
      changePage(page) {
        this.page = page;
        this._QueryData();
      },
      saveCount() {
        //保存修改账号
        this.$refs.formCount.validate(async (valid) => {
          if (valid) {
            let params = { ...this.formCount };

            // params.password = encryptLoginPassword(params.password);
            const { data, status, info } = await this.$request.updateTenant({

              type: 3,
              ...params,
            });
            if (status === 0) {
              this.$message.success(info);
              this.diaCount = false;
              this._QueryData();
            } else {
              this.$message.error(info);
            }
          } else {
            this.$message.warning("输入有误请检查！");
            return false;
          }
        });
      },
      async updateUser(obj, type) {
        let query = {};
        console.log(query);
        if (type == 1) {
          query.available = obj.available == 0 ? 1 : 0;
        }

        const { data, status, info } = await this.$request.updateTenant({

          userId: obj.id,
          type: type,
          ...query,
        });
        if (status === 0) {
          this.$message.success(info);
          this._QueryData();
        } else {
          this.$message.error(info);
        }
      },
      async _QueryData() {
        let query = { ...this.query };
        if (query.loginName) {

          delete query.versionType;

          delete query.available;
        }
        this.loading = true;
        this.tableData = [];
        const { data, status, info } = await this.$request.tenantPage({
          ...query,
          page: this.page,
          size: this.size,
        });

        this.loading = false;
        if (status === 0) {
          this.tableData = data.list || [];
          this.total = data.count;
        } else {
          this.$message.error(info);
        }
      },
    },
  };

  </script>

  <style  lang="scss">
  .del-model {
    .el-message-box__btns button:nth-child(1) {
      color: #667ffd;
    }
  }
  </style>
  <style lang="scss" scoped>
  .el-message-box .el-button--default {
    color: red;
  }
  .set-count {
    margin-right: 12px;
  }
  .table-box {
    padding: 0 20px;
  }

  </style>