riku
2023-05-19 c9571c465c756deedbfe424b5eab2d7591119f77
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
<template>
  <!-- <template v-if="!formObj.e">
    <div>当前场景暂无账户</div>
    <el-button
      type="primary"
      @click="autoCreateAccount"
      :loading="createLoading"
      >自动创建账户</el-button
    >
  </template> -->
  <el-form
    :inline="false"
    :model="formObj"
    ref="formRef"
    :rules="rules"
    label-position="right"
    label-width="150px"
  >
    <el-form-item label="用户名" prop="realname">
      <el-input clearable v-model="formObj.realname" placeholder="用户名" />
    </el-form-item>
    <el-form-item label="账号" prop="acountname">
      <el-input clearable v-model="formObj.acountname" placeholder="账号" />
    </el-form-item>
 
    <el-form-item label="密码" prop="password">
      <el-input
        type="password"
        show-password
        clearable
        v-model="formObj.password"
        placeholder="密码"
      />
    </el-form-item>
    <el-form-item label="用户类型" prop="_typeObj">
      <el-select v-model="formObj._typeObj" placeholder="用户类型">
        <el-option
          v-for="s in userTypes"
          :key="s.value"
          :label="s.label"
          :value="s"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="联系电话" prop="telephone">
      <el-input
        clearable
        type="tel"
        v-model="formObj.telephone"
        placeholder="联系电话"
      >
        <template #prepend>
          <el-icon><Iphone /></el-icon>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item label="状态" prop="isenable">
      <el-switch v-model="formObj.isenable" />
      <span style="margin-left: 16px">{{
        formObj.isenable ? '启用' : '注销'
      }}</span>
    </el-form-item>
 
    <el-form-item>
      <el-button
        :disabled="!edit"
        type="primary"
        @click="onSubmit"
        :loading="updateLoading"
        >提交</el-button
      >
      <el-button :disabled="!edit" @click="onReset">重置</el-button>
    </el-form-item>
  </el-form>
</template>
 
<script setup>
import { defineProps, defineEmits, reactive, ref, watch } from 'vue';
import { enumUserNA } from '@/enum/user';
import { useFormConfirm } from '@/composables/formConfirm';
import userApi from '@/api/fysp/userApi';
 
const props = defineProps({
  //基本信息
  formInfo: Object,
  //是创建或者更新
  create: Boolean,
});
const emit = defineEmits(['onSubmit', 'onCancel']);
 
const { formObj, formRef, edit, onSubmit, onReset } = useFormConfirm({
  submit: {
    do: submit,
  },
  cancel: {
    do: cancel,
  },
});
const createLoading = ref(false);
const updateLoading = ref(false);
const userTypes = reactive(enumUserNA());
const rules = reactive({
  name: [
    {
      required: true,
      message: '场景名称不能为空',
      trigger: 'blur',
    },
  ],
});
 
// 场景基本信息格式化
function parseSceneBaseInfo(s) {
  s._typeObj = {
    label: s.usertype,
    value: s.usertypeid + '',
  };
  s.online = s.extension1 != '0';
 
  return s;
}
 
// 自动创建账户
function autoCreateAccount() {
  createLoading.value = true;
  userApi
    .autoCreateAccount(formObj.value.dguid)
    .then((res) => {
      formObj.value = res;
      formObj.value.e = true;
    })
    .finally(() => {
      createLoading.value = false;
    });
}
 
function updateUser() {
  updateLoading.value = true;
  userApi.updateUser().finally(() => {
    updateLoading.value = false;
  });
}
 
watch(
  () => props.formInfo,
  (nValue) => {
    formObj.value = parseSceneBaseInfo(nValue);
  }
);
 
function submit() {
  emit('onSubmit', formObj);
  return updateUser();
}
function cancel() {
  emit('onCancel');
}
</script>