|
|
@@ -0,0 +1,159 @@
|
|
|
+<script lang="ts" setup>
|
|
|
+/**
|
|
|
+ * @Name: CreateComputer.vue
|
|
|
+ * @Description:
|
|
|
+ * @Author: xinyan
|
|
|
+ */
|
|
|
+import { ElMessage, FormInstance, FormRules } from 'element-plus';
|
|
|
+import { useResponse } from '/@/utils/useResponse';
|
|
|
+import * as api from '../api';
|
|
|
+
|
|
|
+const showDialog = defineModel({ default: false });
|
|
|
+
|
|
|
+// 图片处理
|
|
|
+const upload = ref<UploadInstance>();
|
|
|
+// 表单数据
|
|
|
+interface RuleForm {
|
|
|
+ computerNumber: string;
|
|
|
+ computerType: string;
|
|
|
+ station: string;
|
|
|
+ shop: string;
|
|
|
+ user: string;
|
|
|
+ macaddress: string;
|
|
|
+ ipaddress: string;
|
|
|
+ images: UploadFile[];
|
|
|
+}
|
|
|
+const ruleFormRef = ref<FormInstance>();
|
|
|
+const formData = reactive<RuleForm>({
|
|
|
+ computerNumber: '',
|
|
|
+ computerType: '',
|
|
|
+ station: '',
|
|
|
+ shop: '',
|
|
|
+ user: '',
|
|
|
+ macaddress: '',
|
|
|
+ ipaddress: '',
|
|
|
+ images: [],
|
|
|
+});
|
|
|
+
|
|
|
+const rules = reactive<FormRules<RuleForm>>({
|
|
|
+ computerNumber: [{ required: true, message: '请输入电脑编号', trigger: 'blur' }],
|
|
|
+ computerType: [{ required: true, message: '请输入电脑类型', trigger: 'blur' }],
|
|
|
+ station: [{ required: true, message: '请输入所在站点', trigger: 'blur' }],
|
|
|
+ shop: [{ required: true, message: '请输入所属商铺', trigger: 'blur' }],
|
|
|
+ user: [{ required: true, message: '请输入使用者', trigger: 'blur' }],
|
|
|
+ macaddress: [{ required: true, message: '请输入MAC地址', trigger: 'blur' }],
|
|
|
+ ipaddress: [{ required: true, message: '请输入IP地址', trigger: 'blur' }],
|
|
|
+});
|
|
|
+
|
|
|
+// 表单字段配置
|
|
|
+const formFields = [
|
|
|
+ { label: '电脑编号：', key: 'computerNumber'},
|
|
|
+ { label: '电脑类型：', key: 'computerType'},
|
|
|
+ { label: '工位号：', key: 'station'},
|
|
|
+ { label: '所属店铺：', key: 'shop'},
|
|
|
+ { label: '电脑使用人：', key: 'user'},
|
|
|
+ { label: 'MAC地址：', key: 'macaddress'},
|
|
|
+ { label: '使用IP地址：', key: 'ipaddress'},
|
|
|
+];
|
|
|
+const shopOptions = [
|
|
|
+ {
|
|
|
+ value: 'shop1',
|
|
|
+ label: '店铺一',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'shop2',
|
|
|
+ label: '店铺二',
|
|
|
+ },
|
|
|
+];
|
|
|
+
|
|
|
+// 超过图片限制时触发的回调
|
|
|
+const handleExceed: UploadProps['onExceed'] = (files) => {
|
|
|
+ upload.value!.clearFiles();
|
|
|
+ const file = files[0] as UploadRawFile;
|
|
|
+ file.uid = genFileId();
|
|
|
+ upload.value!.handleStart(file);
|
|
|
+};
|
|
|
+
|
|
|
+const submitForm = async (formEl: FormInstance | undefined) => {
|
|
|
+ if (!formEl) return
|
|
|
+ await formEl.validate((valid, fields) => {
|
|
|
+ if (valid) {
|
|
|
+ handleSave();
|
|
|
+ console.log('submit!')
|
|
|
+ } else {
|
|
|
+ console.log('error submit!', fields)
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+// 保存操作
|
|
|
+async function handleSave () {
|
|
|
+ const body = {
|
|
|
+ computerNumber: formData.computerNumber,
|
|
|
+ computerType: formData.computerType,
|
|
|
+ station: formData.station,
|
|
|
+ shop: formData.shop,
|
|
|
+ user: formData.user,
|
|
|
+ macaddress: formData.macaddress,
|
|
|
+ ipaddress: formData.ipaddress,
|
|
|
+ images: formData.images,
|
|
|
+ };
|
|
|
+ await useResponse(body, api.createComputer);
|
|
|
+ console.log("=>(CreateComputer.vue:94) body", body);
|
|
|
+}
|
|
|
+
|
|
|
+// 取消操作
|
|
|
+const handleCancel = () => {
|
|
|
+ router.push({
|
|
|
+ path: '/computer',
|
|
|
+ });
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<template>
|
|
|
+ <el-dialog v-model="showDialog" :close-on-click-modal="false" title="新增电脑信息" width="35%">
|
|
|
+ <el-form
|
|
|
+ ref="ruleFormRef"
|
|
|
+ :model="formData"
|
|
|
+ :rules="rules"
|
|
|
+ class="computer-info-form"
|
|
|
+ label-width="auto"
|
|
|
+ status-icon>
|
|
|
+ <el-form-item v-for="field in formFields" :label="field.label" :prop="field.key">
|
|
|
+ <el-select v-if="field.key === 'shop'" v-model="formData[field.key]" placeholder="请选择店铺">
|
|
|
+ <el-option v-for="shop in shopOptions" :key="shop.value" :label="shop.label" :value="shop.value" />
|
|
|
+ </el-select>
|
|
|
+ <el-input v-else v-model="formData[field.key]" />
|
|
|
+ </el-form-item>
|
|
|
+ <!-- 电脑图片上传 -->
|
|
|
+ <el-form-item :key="images" label="电脑图片：">
|
|
|
+ <el-upload
|
|
|
+ ref="upload"
|
|
|
+ v-model:file-list="formData.images"
|
|
|
+ :auto-upload="false"
|
|
|
+ :limit="1"
|
|
|
+ :on-exceed="handleExceed"
|
|
|
+ action="#"
|
|
|
+ list-type="picture-card"
|
|
|
+ >
|
|
|
+ <el-icon>
|
|
|
+ <Plus />
|
|
|
+ </el-icon>
|
|
|
+ </el-upload>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <template #footer>
|
|
|
+ <div class="dialog-footer">
|
|
|
+ <el-button type="primary" @click="submitForm(ruleFormRef)">保存</el-button>
|
|
|
+ <el-button @click="handleCancel">取消</el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+</template>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.dialog-footer {
|
|
|
+ margin-bottom: 10px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+</style>
|
xinyan