store-manage-app/src/pages/user/update.vue

<template>
  <view class="p-base">
    <CuNavbar :title="title">
      <!-- <template #right>
        <view class="text-white">保存</view>
      </template> -->
    </CuNavbar>
    <view class="card-shadow px-base">
      <uv-form
        labelPosition="left"
        :model="form"
        :rules="rules"
        ref="formRef"
        errorType="toast"
        labelWidth="150rpx"
      >
        <uv-form-item required label="姓名" prop="name">
          <uv-input
            placeholder="请输入姓名"
            inputAlign="right"
            :border="`none`"
            v-model="form.name"
          >
          </uv-input>
        </uv-form-item>
        <uv-line color="#f5f5f5"></uv-line>
        <uv-form-item required label="手机号" prop="phone">
          <uv-input
            placeholder="请输入手机号"
            inputAlign="right"
            :border="`none`"
            type="number"
            maxlength="11"
            v-model="form.phone"
          >
          </uv-input>
        </uv-form-item>
        <uv-line color="#f5f5f5"></uv-line>
        <uv-form-item required label="登录用户名" prop="username">
          <uv-input
            placeholder="请输入登录用户名"
            inputAlign="right"
            v-model="form.username"
            :border="`none`"
          >
          </uv-input>
        </uv-form-item>
        <uv-line color="#f5f5f5"></uv-line>
        <uv-form-item :required="!isEdit" label="登录密码" prop="password">
          <uv-input
            placeholder="请输入登录密码"
            inputAlign="right"
            type="password"
            v-model="form.password"
            :border="`none`"
          >
          </uv-input>
        </uv-form-item>
        <uv-form-item :required="!isEdit" label="门店" prop="password">

        </uv-form-item>
      </uv-form>
    </view>
    <view class="mt-100rpx">
      <uv-button type="primary" @click="submit">保存</uv-button>
    </view>

    <uv-modal
      ref="modalRef"
      title="提示"
      content="确定提交员工信息？"
      @confirm="onSubmit"
      :showCancelButton="true"
    ></uv-modal>
  </view>
</template>
<script setup>
import CuNavbar from '@/components/cu-navbar/index'
import { ref, reactive, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { mobile } from '@climblee/uv-ui/libs/function/test'
import { http } from '@/utils/request'
const formRef = ref(null)
const modalRef = ref(null)
const id = ref(0)
const loading = ref(false)
const form = reactive({
  name: '',
  phone: '',
  username: '',
  password: '',
  confirm_password: '',
})
const rules = computed(() => {
  return {
    name: [{ required: true, message: '请输入姓名' }],
    phone: [
      { required: true, message: '请输入手机号' },
      {
        validator: (rule, value) => {
          return mobile(value)
        },
        message: '请输入正确的手机号',
      },
    ],
    username: [{ required: true, message: '请输入登录用户名' }],
    password: [{ required: !isEdit.value, message: '请输入登录密码' }],
    confirm_password: [
      { required: !isEdit.value, message: '请输入登录密码' },
      {
        validator: (rule, value) => {
          return form.password === value
        },
        message: '两次密码不一致',
      },
    ],
  }
})
onLoad((options) => {
  id.value = options.id
  if(isEdit.value) getDetail()
})
const isEdit = computed(() => !!id.value)
const title = computed(() => (isEdit.value ? '员工修改' : '员工添加'))

const submit = () => {
  formRef.value.validate().then((res) => {
    modalRef.value.open()
  })
}

const onSubmit = () => {
  if (isEdit.value) {
    updateUser()
  } else {
    addUser()
  }
}
const updateUser = async () => {
  if (loading.value) {
    return
  }
  loading.value = true
  try {
    await http.put(`/hr/employee/${id.value}`, {
      ...form,
    })
    uni.$emit('user:onRefresh')
    uni.navigateBack()
    formRef.value.resetFields()
    uni.showToast({
      title: '修改成功',
      duration: 2000,
      icon: 'none',
    })
  } catch (error) {
  } finally {
    loading.value = false
  }
}
const addUser = async () => {
  if (loading.value) {
    return
  }
  loading.value = true
  try {
    await http.post('/hr/employee', {
      ...form,
    })
    formRef.value.resetFields()
    uni.showToast({
      title: '添加成功',
      duration: 2000,
      icon: 'none',
    })
  } catch (error) {
  } finally {
    loading.value = false
  }
}

const getDetail = () => {
  http.get(`/hr/employee/${id.value}`).then((res) => {
    const info = {
      name: res.name,
      phone: res.phone,
      username: res.username,
    }
    Object.assign(form, info)
  })
}
</script>