front-end/hdApp/src/admin/staff/add.vue

<template>
  <div class="app-content">
    <div v-show="showStaffArea">
      <!-- 员工信息 -->
      <form @submit="formSubmit" @reset="formReset">
        <div class="module-com input-line-wrap">
          <tui-list-cell class="line-cell" :hover="false">
            <div class="tui-title required">姓名</div>
            <input
              v-model="form.name"
              placeholder-class="phcolor"
              class="tui-input"
              name="name"
              placeholder="请输入姓名"
              maxlength="50"
              type="text"
            />
          </tui-list-cell>
          <tui-list-cell class="line-cell" :arrow="true">
            <div class="tui-title required">角色</div>
            <picker
              mode="selector"
              :value="form.roleId"
              :range="roleList"
              range-key="roleName"
              @change="changeRoleFn"
              class="tui-input"
            >
              <input v-model="form.roleId" name="roleId" type="text" hidden />
              <div v-if="form.roleId">{{ roleSelData.roleName }}</div>
              <div class="tui-placeholder" v-else>请选择</div>
            </picker>
          </tui-list-cell>

        </div>
        <!-- 收款通知 -->
        <div class="module-com input-line-wrap">
          <tui-list-cell class="line-cell between" padding="14rpx 30rpx" :hover="false">
            <div class="tui-title">收款通知</div>
            <div>
              <switch :checked="form.remind == 0 ? false : true" @change="remindChangeFn" />
            </div>
          </tui-list-cell>
        </div>
        <!-- 马上启用 -->
        <div class="module-com input-line-wrap">
          <tui-list-cell class="line-cell between" padding="14rpx 30rpx" :hover="false">
            <div class="tui-title">启用状态</div>
            <div>
              <switch :checked="form.status == 0 ? false : true" @change="statusChangeFn" />
            </div>
          </tui-list-cell>
        </div>
        <!-- 登录信息 -->
        <div class="module-com input-line-wrap">
          <tui-list-cell class="line-cell" :hover="false">
            <div class="tui-title">登录密码</div>
            <input
              v-model="form.password"
              placeholder-class="phcolor"
              class="tui-input"
              name="password"
              placeholder="请输入"
              maxlength="50"
              type="password"
            />
          </tui-list-cell>
          <tui-list-cell class="line-cell remark-wrap" :hover="false">
            <div class="tui-title">备注信息</div>
            <div class="tui-input">
              <textarea
                v-model="form.remark"
                class="tui-textarea remark"
                placeholder-class="phcolor"
                placeholder="请输入内容"
              />
            </div>
          </tui-list-cell>
        </div>
        <!-- 提交 -->
        <div class="confirm-btn">
          <button class="admin-button-com big blue" formType="submit">提交</button>
        </div>
      </form>
    </div>
    <div v-show="showMiniCodeArea">
      <view style="text-align:center;">
          <image style="width:200px;height:200px;margin:0 auto;" :src="miniCodeSrc"></image>
          <view style="text-align:center;margin-top:20px;margin-bottom:20px;">请让员工扫描上方太阳码完成绑定</view>
          <button class="admin-button-com big blue" @click="complete" style="padding-left:23px;padding-right:23px;">完成</button>
      </view>
    </div>
  </div>
</template>

<script>
import TuiListCell from "@/components/plugin/list-cell";
import AppAvatarModule from "@/components/module/app-avatar";
const form = require("@/utils/formValidation.js");
// api
import {
  getRoleList,
  getStaffDet as getDet,
  updateStaff as update
} from "@/api/staff";
import { getDet as getMemberDet } from "@/api/member";
import { prepareBind } from "@/api/shop-admin";
export default {
  name: "staff-add",
  components: {
    TuiListCell,
    AppAvatarModule
  },
  data() {
    return {
      form: {
        name: "",
        //mobile: '',
        roleId: "",
        remind: 1,
        password: "",
        //userId: '',
        status: 1,
        remark: "",
      },
      roleList: [],
      roleSelData: {},
      showStaffArea: true,
      showMiniCodeArea: false,
      miniCodeSrc:'',
      memberData: {}
    };
  },
  onLoad() {
    // this.init()
  },
  onShow() {
    if (this.option.id) {
      uni.setNavigationBarTitle({
        title: `修改员工`
      });
    } else {
      uni.setNavigationBarTitle({
        title: `添加员工`
      });
    }
  },
  methods: {
    init() {
      let data = uni.getStorageSync("addStaffData");
      if (data) {
        uni.removeStorageSync("addStaffData");
        this.form = data.form;
        this.roleList = data.roleList;
        this.roleSelData = data.roleSelData;
      }
      let memberData = uni.getStorageSync("addSelMember");
      if (memberData) {
        uni.removeStorageSync("addSelMember");
        this.memberData = memberData;
        this.form.userId = memberData.id;
      }

      if (data) return false;

      this._getRoleList().then(res => {
        if (this.option.id) {
          this._getDet();
        }
      });
    },
    // api
    async _getRoleList() {
      await getRoleList().then(res => {
        if (this.$util.isEmpty(res.data)) return false;
        this.roleList = res.data.list;
      });
    },
    _getDet() {
      getDet({ id: this.option.id }).then(res => {
        if (this.$util.isEmpty(res.data)) return;
        Object.keys(this.form).forEach((i, index) => {
          // if (i != 'password') {
          this.form[i] = res.data[i];
          // }
        });
        this.roleSelData = this.roleList.filter(
          e => this.form.roleId == e.id
        )[0];

        if (this.form.userId && this.form.userId != "0") {
          this._getMemberDet();
        }
      });
    },
    // 获取客户详情
    _getMemberDet() {
      getMemberDet({ userId: this.form.userId }).then(res => {
        if (this.$util.isEmpty(res.data)) return;
        this.memberData = res.data;
      });
    },
    // option
    // 关联微信
    selMemberFn() {
      let data = {
        form: this.form,
        roleList: this.roleList,
        roleSelData: this.roleSelData
      };
      uni.setStorageSync("addStaffData", data);
      this.$util.pageTo({
        url: "/admin/staff/sel-member",
        query: {
          ...this.option
        }
      });
    },
    changeRoleFn(e) {
      this.roleSelData = this.roleList[e.detail.value];
      this.form.roleId = this.roleSelData.id;
    },
    remindChangeFn(e) {
      this.form.remind = e.detail.value ? 1 : 0;
    },
    statusChangeFn(e) {
      this.form.status = e.detail.value ? 1 : 0;
    },
    confirmFn() {
      let hostFn = this.option.id ? update : prepareBind;
      if (this.option.id) {
        this.form.id = this.option.id;
      }
      hostFn(this.form).then(res => {
        console.log('23rh23r23')
        console.log(res)
        console.log(this.option.id)
        if(typeof(this.option.id) == 'undefined'){
          this.showMiniCodeArea = true;
          this.miniCodeSrc = res.data.miniCode;
          this.showStaffArea = false;
          console.log(this.miniCodeSrc)
          console.log('--oo0oooo---')
        }else{
          let promptText = this.option.id ? "修改成功！" : "添加成功！";
          this.$msg(promptText);
          setTimeout(() => {
            this.$util.pageTo({
              url: "/admin/staff/list",
              type: 2
            });
          }, 1000);
        }
        
      });
    },
    complete(){
      this.$util.pageTo(1)
    },
    // 表单验证
    formSubmit(e) {
      // 表单规则
      let rules = [
        {
          name: "name",
          rule: ["required"],
          msg: ["请输入姓名"]
        },
        // {
        // 	name: 'mobile',
        // 	rule: ['required'],
        // 	msg: ['请输入手机号']
        // },
        {
          name: "roleId",
          rule: ["required"],
          msg: ["请选择角色"]
        }
        // {
        // 	name: 'userId',
        // 	rule: ['required'],
        // 	msg: ['请选择关联微信']
        // }
        // {
        // 	name: 'password',
        // 	rule: ['required'],
        // 	msg: ['请输入密码']
        // }
      ];
      // 进行表单检查
      let formData = e.detail.value;
      let checkRes = form.validation(formData, rules);
      // 验证通过!
      if (!checkRes) {
        this.confirmFn();
      } else {
        this.$msg(checkRes);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.app-content {
  min-height: calc(100vh - 20px);
  padding-top: 20px;
}
.prompt-text {
  color: $fontColor3;
  padding-left: 30px;
  margin-bottom: 30px;
}
// ---
.module-com {
  margin-bottom: 20px;
  .member-wrap {
    .member-det {
      font-size: 24px;
      margin-left: 20px;
    }
  }
  .remark-wrap {
    align-items: flex-start;
    .remark {
      height: 240px;
    }
  }
}
// 按钮
.confirm-btn {
  width: calc(100% - 60px);
  margin: 60px 30px 20px;
  .admin-button-com {
    width: 100%;
  }
}
</style>