查看/编辑页面开发、审核页面开发

yangfeng

2024-01-04 5cce58dab04d9d3f2c4c67df7cf8379acb7c03ab

查看/编辑页面开发、审核页面开发

 src/views/unifiedManage/userLevel/components/AddUserLevel.vue

@@ -346,11 +346,13 @@
        box-sizing: border-box;
      }
    }
    .dialog-footer {
      background-color: #f5f5f5;
      height: 55px;
      line-height: 55px;
    }
  }
  .el-dialog__footer {
    background-color: #f5f5f5;
    height: 55px;
    line-height: 55px;
    text-align: right;
    padding-right: 20px;
  }
  .el-input__inner {
    font-size: 13px !important;

 src/views/unifiedManage/userLevel/index.vue

@@ -183,8 +183,9 @@
    },
    // 编辑
    handleClick(val) {
      this.editRow = val
      this.isopen = true
      this.editConfig.title = "编辑"
      this.editConfig.infomation = { ...val }
      this.editConfig.visible = true
    },
    // 删除等级
    delClick(row) {

 src/views/unifiedManage/userManage/components/EditUserInfo.vue

New file
@@ -0,0 +1,150 @@
<template>
  <div class="add-quotation">
    <el-dialog
      :title="'用户详情'"
      :visible.sync="editConfig.visible"
      :width="dialogWidth"
      :before-close="handleClose"
      append-to-body
      custom-class="iframe-dialog"
    >
      <div class="drawerContent" style="overflow: auto">
        <el-form ref="form" :rules="rules" :model="form" label-position="right" label-width="100px">
          <el-form-item label="用户名:" prop="username">
            <el-input v-model="form.username" placeholder="请输入" disabled></el-input>
          </el-form-item>
          <el-form-item label="密码:" prop="password">
            <el-input v-model="form.password" placeholder="请输入" disabled></el-input>
          </el-form-item>
          <el-form-item label="手机号:" prop="phone">
            <el-input-number
              v-model="form.phone"
              placeholder=""
              :min="0"
              :controls="false"
              disabled
              style="width: 100%"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="公司名称:" prop="company">
            <el-input v-model="form.company" placeholder="请输入" disabled></el-input>
          </el-form-item>
          <el-form-item label="联系人名称:" prop="contact">
            <el-input v-model="form.contact" placeholder="请输入" disabled></el-input>
          </el-form-item>
          <el-form-item label="邮箱:" prop="email">
            <el-input v-model="form.email" placeholder="请输入" disabled></el-input>
          </el-form-item>
          <el-form-item label="行业:" prop="industry">
            <el-input v-model="form.industry" placeholder="请输入" disabled></el-input>
          </el-form-item>
          <el-form-item label="地区:" prop="region">
            <el-input v-model="form.region" placeholder="请输入" disabled></el-input>
          </el-form-item>
          <el-form-item label="用户等级:" prop="level">
            <el-radio-group v-model="form.level" :disabled="editConfig.title == '查看' ? true : false">
              <div style="margin-top: 10px">
                <el-radio :label="1">三合一经典会员</el-radio>
                <el-radio :label="2">APS+WMS普通会员</el-radio>
              </div>
              <div style="margin-top: 10px">
                <el-radio :label="3">四合一超级会员</el-radio>
                <el-radio :label="4">APS普通会员</el-radio>
              </div>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button v-if="editConfig.title == '查看' ? false : true" type="primary" @click="onSubmit('form')"
          >确定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "EditUserInfo",
  props: {
    editCommonConfig: {
      type: Object,
      default: () => {
        return {
          visible: false,
          title: "新建",
          infomation: {}
        }
      }
    }
  },
  components: {},
  computed: {},
  data() {
    return {
      dialogWidth: "30%",
      editConfig: this.editCommonConfig,
      form: {},
      rules: {
        username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        phone: [{ required: true, message: "请输入手机号", trigger: "blur" }],
        company: [{ required: true, message: "请输入公司名称", trigger: "blur" }],
        contact: [{ required: true, message: "请输入联系人名称", trigger: "blur" }],
        level: [{ required: true, message: "请选择用户等级", trigger: "change" }]
      }
    }
  },
  watch: {
    "editCommonConfig.visible"(val) {
      if (val) {
        this.$refs.form.resetFields()
        // this.getDataInfo()
      }
    },
    "editCommonConfig.infomation"(val) {
      if (this.isopen) {
        this.$refs.form.resetFields()
        if (val.id) {
          // this.getDataInfo(val)
        }
      }
    }
  },
  created() {
    // this.getDataInfo()
  },
  methods: {
    handleClose() {
      this.editConfig.visible = false
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
::v-deep {
  .iframe-dialog .el-dialog__body {
    .drawerContent {
      width: 80%;
      padding: 20px 0;
      margin: auto;
      overflow: hidden;
      margin-top: 15px;
      // 溢出隐藏滚动条
      scrollbar-width: none; /* firefox */
      -ms-overflow-style: none; /* IE 10+ */
    }
  }
  .el-dialog__footer {
    background-color: #f5f5f5;
    height: 55px;
    line-height: 55px;
    text-align: right;
    padding-right: 20px;
  }
}
</style>

 src/views/unifiedManage/userManage/components/ReviewDialog.vue

New file
@@ -0,0 +1,128 @@
<template>
  <div class="review-dialog">
    <el-dialog
      :title="editCommonConfig.title"
      :visible.sync="editConfig.visible"
      :width="dialogWidth"
      :before-close="handleClose"
      append-to-body
      custom-class="iframe-dialog"
    >
      <div class="drawerContent" style="overflow: auto">
        <el-form ref="form" :rules="rules" :model="form" label-position="right" label-width="100px">
          <el-form-item label="审核结果:" prop="result">
            <el-select v-model="form.result" placeholder="请选择审核结果">
              <el-option label="审核通过" value="审核通过"></el-option>
              <el-option label="审核拒绝" value="审核拒绝"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-if="form.result === '审核拒绝'" label="未通过原因:" prop="reason">
            <el-input v-model="form.reason" type="textarea"></el-input>
          </el-form-item>
          <el-form-item v-if="form.result === '审核通过'" label="用户等级:" prop="level">
            <el-radio-group v-model="form.level">
              <div style="margin-top: 10px">
                <el-radio :label="1">三合一经典会员</el-radio>
                <el-radio :label="2">APS+WMS普通会员</el-radio>
              </div>
              <div style="margin-top: 10px">
                <el-radio :label="3">四合一超级会员</el-radio>
                <el-radio :label="4">APS普通会员</el-radio>
              </div>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button v-if="editConfig.title == '查看' ? false : true" type="primary" @click="onSubmit('form')"
          >确定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "ReviewDialog",
  props: {
    editCommonConfig: {
      type: Object,
      default: () => {
        return {
          visible: false,
          title: "用户审核",
          infomation: {}
        }
      }
    }
  },
  components: {},
  computed: {},
  data() {
    return {
      dialogWidth: "30%",
      editConfig: this.editCommonConfig,
      form: {
        result: "审核通过"
      },
      rules: {
        result: [{ required: true, message: "请选择审核结果", trigger: "change" }],
        reason: [{ required: true, message: "请输入拒绝原因", trigger: "blur" }],
        level: [{ required: true, message: "请选择用户等级", trigger: "change" }]
      }
    }
  },
  watch: {
    "editCommonConfig.visible"(val) {
      if (val) {
        this.$refs.form.resetFields()
        // this.getDataInfo()
      }
    },
    "editCommonConfig.infomation"(val) {
      if (this.isopen) {
        this.$refs.form.resetFields()
        if (val.id) {
          this.form = val
          // this.getDataInfo(val)
        }
      }
    }
  },
  created() {
    // this.getDataInfo()
  },
  methods: {
    handleClose() {
      this.editConfig.visible = false
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
::v-deep {
  .iframe-dialog .el-dialog__body {
    .drawerContent {
      width: 80%;
      padding: 20px 0;
      margin: auto;
      overflow: hidden;
      margin-top: 15px;
      // 溢出隐藏滚动条
      scrollbar-width: none; /* firefox */
      -ms-overflow-style: none; /* IE 10+ */
    }
  }
  .el-dialog__footer {
    background-color: #f5f5f5;
    height: 55px;
    line-height: 55px;
    text-align: right;
    padding-right: 20px;
  }
}
</style>

 src/views/unifiedManage/userManage/index.vue

@@ -33,34 +33,46 @@
        </div>
      </div>
    </div>
    <!-- 新建/编辑 -->
    <!-- <AddSubOrderDialog v-if="editConfig.visible" :edit-common-config="editConfig" /> -->
    <!-- 查看/编辑 -->
    <EditUserInfo v-if="editConfig.visible" :edit-common-config="editConfig" />
    <!-- 审核 -->
    <ReviewDialog v-if="reviewConfig.visible" :edit-common-config="reviewConfig" />
  </div>
</template>

<script>
import pageMixin from "@/components/makepager/pager/mixin/pageMixin"

import EditUserInfo from "@/views/unifiedManage/userManage/components/EditUserInfo"
import ReviewDialog from "@/views/unifiedManage/userManage/components/ReviewDialog"
export default {
  name: "UserManage",
  props: {},
  mixins: [pageMixin],
  components: {},
  components: { EditUserInfo, ReviewDialog },
  computed: {},
  data() {
    return {
      tableList: {},
      tableColumn: [
        { label: "用户名", prop: "username" },
        { label: "用户名", prop: "username", default: true },
        { label: "手机号", prop: "phone" },
        { label: "公司名称", prop: "company" },
        { label: "联系人姓名", prop: "contact" },
        { label: "邮箱", prop: "mailbox" },
        { label: "邮箱", prop: "email" },
        { label: "行业", prop: "industry" },
        { label: "地区", prop: "region" },
        { label: "状态", prop: "status" }
      ],
      showCol: ["用户名", "手机号", "公司名称", "联系人姓名", "邮箱", "行业", "地区", "状态"]
      showCol: ["用户名", "手机号", "公司名称", "联系人姓名", "邮箱", "行业", "地区", "状态"],
      editConfig: {
        visible: false,
        title: "查看",
        infomation: {}
      },
      reviewConfig: {
        visible: false,
        infomation: {}
      }
    }
  },
  created() {
@@ -74,14 +86,23 @@
    // 查看
    viewClick(row) {
      console.log(row)
      this.editConfig.visible = true
      this.editConfig.title = "查看"
      this.editConfig.tableInfomation = { ...row }
    },
    // 审核
    approveClick(row) {
      console.log(row)
      this.reviewConfig.visible = true
      this.reviewConfig.title = "用户审核"
      this.reviewConfig.tableInfomation = { ...row }
    },
    // 编辑
    editClick(row) {
      console.log(row)
      this.editConfig.visible = true
      this.editConfig.title = "编辑"
      this.editConfig.tableInfomation = { ...row }
    },
    // 列表初始化
    setTable() {