EditComputerInfo.vue 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149
  1. <script lang="ts" setup>
  2. /**
  3. * @Name: EditComputerInfo.vue
  4. * @Description: 编辑电脑信息
  5. * @Author: xinyan
  6. */
  7. import { ref } from 'vue';
  8. import { FormInstance, FormRules, UploadInstance, UploadProps, UploadRawFile } from 'element-plus';
  9. import { genFileId } from 'element-plus';
  10. import router from '/@/router';
  11. import { cloneDeep } from 'lodash';
  12. const visible = defineModel({ default: false });
  13. const { computerInfo, computerNumber , userOptions, shopOptions } = defineProps<{
  14. computerInfo: any;
  15. computerNumber: any;
  16. userOptions: any;
  17. shopOptions: any;
  18. }>();
  19. // 图片处理
  20. const upload = ref<UploadInstance>();
  21. // 表单数据
  22. const ruleFormRef = ref<FormInstance>();
  23. const formData = reactive<RuleForm>({
  24. computerNumber: '',
  25. computerType: '',
  26. station: '',
  27. shop: '',
  28. user: '',
  29. macaddress: '',
  30. ipaddress: '',
  31. images: [],
  32. });
  33. const rules = reactive<FormRules<RuleForm>>({
  34. computerNumber: [{ required: true, message: '请输入电脑编号', trigger: 'blur' }],
  35. computerType: [{ required: true, message: '请输入电脑类型', trigger: 'blur' }],
  36. station: [{ required: true, message: '请输入所在站点', trigger: 'blur' }],
  37. shop: [{ required: true, message: '请输入所属商铺', trigger: 'blur' }],
  38. user: [{ required: true, message: '请输入使用者', trigger: 'blur' }],
  39. macaddress: [{ required: true, message: '请输入MAC地址', trigger: 'blur' }],
  40. ipaddress: [{ required: true, message: '请输入IP地址', trigger: 'blur' }],
  41. });
  42. onBeforeMount(() => {
  43. replaceCol();
  44. });
  45. // 超过图片限制时触发的回调
  46. const handleExceed: UploadProps['onExceed'] = (files) => {
  47. upload.value!.clearFiles();
  48. const file = files[0] as UploadRawFile;
  49. file.uid = genFileId();
  50. upload.value!.handleStart(file);
  51. };
  52. // 保存操作
  53. const handleSave = () => {
  54. console.log(formData);
  55. };
  56. // 取消操作
  57. const handleCancel = () => {
  58. router.push({
  59. path: '/computer',
  60. });
  61. };
  62. function replaceCol() {
  63. const result = Object.keys(formData).reduce((acc, key) => {
  64. if (key in computerInfo) {
  65. acc[key] = computerInfo[key];
  66. }
  67. return acc;
  68. }, {} as { [key: string]: any });
  69. Object.assign(formData, result);
  70. }
  71. </script>
  72. <template>
  73. <el-drawer :title="`电脑编辑 - ${computerNumber}`" v-model="visible" size="30%">
  74. <el-form ref="ruleFormRef" :model="formData" :rules="rules" class="computer-info-form" label-width="auto">
  75. <el-form-item label="电脑编号:" prop="computerNumber">
  76. <el-input v-model="formData.computerNumber" placeholder="请输入电脑编号" />
  77. </el-form-item>
  78. <el-form-item label="电脑类型:" prop="computerType">
  79. <el-input v-model="formData.computerType" placeholder="请输入电脑类型" />
  80. </el-form-item>
  81. <el-form-item label="工位号:" prop="station">
  82. <el-input v-model="formData.station" placeholder="请输入工位号" />
  83. </el-form-item>
  84. <el-form-item label="所属店铺:" prop="shop">
  85. <el-select v-model="formData.shop" clearable filterable multiple collapse-tags placeholder="请选择店铺">
  86. <el-option v-for="shop in shopOptions" :key="shop.value" :label="shop.label" :value="shop.value" />
  87. </el-select>
  88. </el-form-item>
  89. <el-form-item label="电脑使用人:" prop="user">
  90. <el-select v-model="formData.user" placeholder="请选择电脑使用人">
  91. <el-option v-for="user in userOptions" :key="user.value" :label="user.label" :value="user.value" />
  92. </el-select>
  93. </el-form-item>
  94. <el-form-item label="MAC地址:" prop="macaddress">
  95. <el-input v-model="formData.macaddress" placeholder="请输入MAC地址" />
  96. </el-form-item>
  97. <el-form-item label="使用IP地址:" prop="ipaddress">
  98. <el-input v-model="formData.ipaddress" placeholder="请输入IP地址" />
  99. </el-form-item>
  100. <!-- 电脑图片上传 -->
  101. <el-form-item :key="images" label="电脑图片:">
  102. <el-upload
  103. ref="upload"
  104. v-model:file-list="formData.images"
  105. :auto-upload="false"
  106. :limit="1"
  107. :on-exceed="handleExceed"
  108. action="#"
  109. list-type="picture-card"
  110. >
  111. <el-icon>
  112. <Plus />
  113. </el-icon>
  114. </el-upload>
  115. </el-form-item>
  116. <!-- 按钮组 -->
  117. <el-form-item class="button-group">
  118. <el-button type="primary" @click="handleSave">保存</el-button>
  119. <el-button @click="handleCancel">取消</el-button>
  120. </el-form-item>
  121. </el-form>
  122. </el-drawer>
  123. </template>
  124. <style scoped>
  125. .computer-info-form {
  126. padding: 20px;
  127. }
  128. .button-group {
  129. margin-top: 20px;
  130. text-align: center;
  131. }
  132. .computer-info-form :deep(.el-form-item__label) {
  133. font-size: 14px;
  134. font-weight: 500;
  135. }
  136. </style>