ams_web/src/views/computer-information/components/EditComputerInfo.vue

<script lang="ts" setup>
/**
 * @Name: EditComputerInfo.vue
 * @Description: 编辑电脑信息
 * @Author: xinyan
 */
import { ref } from 'vue';
import { FormInstance, FormRules, UploadInstance, UploadProps, UploadRawFile } from 'element-plus';
import { genFileId } from 'element-plus';
import router from '/@/router';
import { cloneDeep } from 'lodash';

const visible = defineModel({ default: false });
const { computerInfo, computerNumber , userOptions, shopOptions } = defineProps<{
  computerInfo: any;
  computerNumber: any;
  userOptions: any;
  shopOptions: any;
}>();

// 图片处理
const upload = ref<UploadInstance>();
// 表单数据
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' }],
});

onBeforeMount(() => {
  replaceCol();
});

// 超过图片限制时触发的回调
const handleExceed: UploadProps['onExceed'] = (files) => {
	upload.value!.clearFiles();
	const file = files[0] as UploadRawFile;
	file.uid = genFileId();
	upload.value!.handleStart(file);
};

// 保存操作
const handleSave = () => {
	console.log(formData);
};

// 取消操作
const handleCancel = () => {
	router.push({
		path: '/computer',
	});
};

function replaceCol() {
  const result = Object.keys(formData).reduce((acc, key) => {
    if (key in computerInfo) {
      acc[key] = computerInfo[key];
    }
    return acc;
  }, {} as { [key: string]: any });
  Object.assign(formData, result);
}
</script>

<template>
	<el-drawer :title="`电脑编辑 - ${computerNumber}`" v-model="visible" size="30%">
			<el-form  ref="ruleFormRef" :model="formData" :rules="rules" class="computer-info-form" label-width="auto">
        <el-form-item label="电脑编号：" prop="computerNumber">
          <el-input v-model="formData.computerNumber" placeholder="请输入电脑编号" />
        </el-form-item>
        <el-form-item label="电脑类型：" prop="computerType">
          <el-input v-model="formData.computerType" placeholder="请输入电脑类型" />
        </el-form-item>
        <el-form-item label="工位号：" prop="station">
          <el-input v-model="formData.station" placeholder="请输入工位号" />
        </el-form-item>
        <el-form-item label="所属店铺：" prop="shop">
          <el-select v-model="formData.shop" clearable filterable multiple collapse-tags placeholder="请选择店铺">
            <el-option v-for="shop in shopOptions" :key="shop.value" :label="shop.label" :value="shop.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="电脑使用人：" prop="user">
          <el-select v-model="formData.user" placeholder="请选择电脑使用人">
            <el-option v-for="user in userOptions" :key="user.value" :label="user.label" :value="user.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="MAC地址：" prop="macaddress">
          <el-input v-model="formData.macaddress" placeholder="请输入MAC地址" />
        </el-form-item>
        <el-form-item label="使用IP地址：" prop="ipaddress">
          <el-input v-model="formData.ipaddress" placeholder="请输入IP地址" />
        </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-item class="button-group">
					<el-button type="primary" @click="handleSave">保存</el-button>
					<el-button @click="handleCancel">取消</el-button>
				</el-form-item>
			</el-form>
	</el-drawer>
</template>

<style scoped>
.computer-info-form {
	padding: 20px;
}

.button-group {
	margin-top: 20px;
	text-align: center;
}

.computer-info-form :deep(.el-form-item__label) {
	font-size: 14px;
	font-weight: 500;
}
</style>