accout-ui/scripts/page/indexPage.js

module.exports = function (compoenntName) {
  return `<template>
    <div class="${compoenntName} pagePadding">
      <el-row :gutter="10">
        <el-col :span="24" style="padding:  0 0 18px 0">
          <el-col :span="3">
            <el-input
            :size="searchSize"
              v-model="parmValue.loginName"
              :maxlength="40"
              placeholder="账户"
            ></el-input>
          </el-col>
          <el-col :span="3">
            <el-input
            :size="searchSize"
              v-model="parmValue.fullName"
              :maxlength="40"
              placeholder="姓名"
            ></el-input>
          </el-col>
          <el-col :span="3" style="width: 152px;">
            <el-button
              type="primary"
              :size="searchSize"
              @click="searchList"
              icon="el-icon-search"
            ></el-button>
            <el-button type="warning" :size="searchSize" @click="restSearch">
              重置
            </el-button>
          </el-col>
          <el-col :span="3" style="width: 195px;float:right;">
            <el-button
              type="primary"
              :size="searchSize"
              style="float:right;margin-left:5px;"
              @click="searchList"
            >
              刷新
            </el-button>
            <el-button
              type="success"
              :size="searchSize"
              style="float:right;"
              @click="openModal('add', false)"
            >
              添加
            </el-button>
          </el-col>
        </el-col>
      </el-row>
      <el-table
        :data="tableData"
        stripe
        v-loading="loading"
        border
        :size="size"
        style="width: 100%;"
      >
        <el-table-column
          prop="loginName"
          label="账户"
          show-overflow-tooltip
          align="center"
        ></el-table-column>
        <el-table-column
          prop="fullName"
          label="姓名"
          show-overflow-tooltip
          align="center"
        ></el-table-column>
        <!-- <el-table-column
          prop="userId"
          label="所属用户"
          show-overflow-tooltip
          align="center"
        ></el-table-column> -->
        <el-table-column
          prop="tel"
          label="手机号"
          show-overflow-tooltip
          align="center"
        ></el-table-column>
        <el-table-column label="用户类型" show-overflow-tooltip align="center">
          <template slot-scope="scope">
            <el-tag type="success"   :size="tablebtnSize" v-if="scope.row.type === 1">运营人员</el-tag>
            <el-tag type="warning"   :size="tablebtnSize" v-else>物业人员</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="状态" show-overflow-tooltip align="center">
        <template slot-scope="scope">
          <el-tooltip
             
            effect="dark"
            :content="scope.row.status === '1' ? '改为禁用' : '改为启用'"
            placement="top"
          >
            <el-tag
              :size="tablebtnSize"
              v-if="scope.row.status === '1'"
              type="success"
              @click="statusConfirm(scope.row.id, scope.row.status)"
              >启用</el-tag
            >
            <el-tag
              v-else
              :size="tablebtnSize"
              type="warning"
              @click="statusConfirm(scope.row.id, scope.row.status)"
              >禁用</el-tag
            >
          </el-tooltip>
        </template>
      </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          show-overflow-tooltip
          align="center"
        ></el-table-column>
        <el-table-column label="是否超管" show-overflow-tooltip align="center">
          <template slot-scope="scope">
            <el-tag type="warning"   :size="tablebtnSize" v-if="scope.row.isAdmin === 0">否</el-tag>
            <el-tag type="success"   :size="tablebtnSize" v-else>是</el-tag>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" align="center" width="250">
          <template slot-scope="scope">
            <el-button
              type="success"
              :size="tablebtnSize"
              @click="openModal(scope.row.id, false)"
            >
              修改
            </el-button>
            <el-button
              type="danger"
              :size="tablebtnSize"
              :disabled="scope.row.isAdmin === 1"
              @click="deleteById(scope.row.id)"
            >
              删除
            </el-button>
            <el-button
              type="warning"
              :size="tablebtnSize"
              @click="openModal(scope.row.id, true)"
            >
              详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div
        class="Pagination"
        style="text-align: right;margin-top: 10px;"
        v-show="count > 0"
      >
      <el-pagination
      :size="searchSize"
       @size-change="handleSizeChange"
       @current-change="handlePageChange"
       :current-page="parmValue.page"
       :page-sizes="[10, 15, 20, 30, 40]"
       :page-size="parmValue.size"
       layout="total, sizes, prev, pager, next, jumper"
       :total="count"
     ></el-pagination>
      </div>
      <add-edit
        :showModel="showModel"
        :id="modelId"
        :isDetail="isDetail"
        @refresh="searchList"
        @cancel="showModel = false"
      ></add-edit>
    </div>
   </template>
   <script>
    import mixinPage from "@/mixins/elPaginationHandle";
    import asyncRequest from "@/apis/caixiaoService/${compoenntName}";
    import addEdit from "./addEdit";
    import { mapGetters } from "vuex";
   export default {
    name: '${compoenntName}',
    computed: {
      ...mapGetters(["tablebtnSize", "searchSize", "size"]),
    },
    data() {
      return {
        loading: true,
        showModel: false,
        isDetail: false,
        modelId: 0,
        parmValue: {
          loginName: "", // 账户
          fullName: "", // 姓名
          type: 2, // 用户类型（1运营人员 2物业人员）
          page: 1, // 页码
          size: 10 // 每页显示条数
        },
        count: 0, // 总条数
        tableData: []
      };
    },
    mixins: [mixinPage],
    mounted() {
      this.searchList();
    },
    components: {
      addEdit
    },
    methods: {
      restSearch() {
        this.parmValue = {
          loginName: "", // 账户
          fullName: "", // 姓名
          type: 2, // 用户类型（1运营人员 2物业人员）
          page: 1, // 页码
          size: 10 // 每页显示条数
        };
        this.searchList();
      },
      openModal(id, isDetail) {
        this.showModel = true;
        this.modelId = id;
        this.isDetail = isDetail;
      },
      async deleteById(id) {
        await this.$confirm("确定要删除？", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(async () => {
            let res = await asyncRequest.delete({ id });
            if (res.code === 0) {
              this.$notify.success({
                title: "删除成功",
                message: ""
              });
              this.searchList();
            }
          })
          .catch(() => {
            console.log("取消");
          });
      },
      async searchList() {
        this.loading = true;
        let res = await asyncRequest.list(this.parmValue);
        if (res.code === 0 && res.data) {
          this.tableData = res.data.list;
          this.count = Number(res.data.count);
        } else {
          this.tableData = [];
          this.count = 0;
        }
        this.loading = false;
      },
      async statusConfirm(id, status) {
        console.log(id, status);
        let str= status === "1" ? "禁用" : "启用"
        await this.$confirm('确定要改为'+str, {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(async () => {
            this.loading = true;
            const model = {
              id: id,
              status: status === "1" ? "0" : "1",
            };
            const res = await asyncRequest.status(model);
            if (res.code === 0) {
              this.loading = false;
              this.$notify.success({
                title: "状态修改成功！",
                message: "",
              });
              await this.searchList();
            } else {
              this.loading = false;
            }
          })
          .catch(() => {
            console.log("取消");
          });
      },
    }
   }
   </script>
   <style lang="scss" scoped>
   .${compoenntName} {
    
   }
   </style>
   `;
};