opt_web/src/views/product-manage/product-monitor/component/EditDrawer.vue

<script lang="ts" setup>
/**
 * @Name: EditDrawer.vue
 * @Description: 店铺编辑
 * @Author: Cheney
 */

import { ElMessage, FormInstance, FormRules } from 'element-plus';
import { useResponse } from '/src/utils/useResponse';
import * as api from '/src/views/shop-information/api';


const loading = ref(false);
const editOpen = defineModel({ default: false });
const { rowData } = defineProps<{
  rowData: object;
}>();

const emit = defineEmits([ 'refresh' ]);

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

interface RuleForm {
  asin: any,
  sku: any,
  country: any
  shop: any
  group: any
  status: any
  frequency: any
}

const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive<RuleForm>({
  asin: '',
  sku: '',
  country: '',
  shop: '',
  group: '',
  status: '',
  frequency: '',
});

const rules = reactive<FormRules<RuleForm>>({
  asin: [ { required: true, message: '请输入ASIN', trigger: 'blur' } ],
  sku: [ { required: true, message: '请输入SKU', trigger: 'blur' } ],
  country: [ { required: true, message: '请选择国家', trigger: 'change' } ],
  shop: [ { required: true, message: '请输入店铺', trigger: 'blur' } ],
  group: [ { required: true, message: '请输入分组', trigger: 'blur' } ],
  status: [ {  message: '请选择状态', trigger: 'blur' } ],
  frequency: [ { message: '请选择更新频率', trigger: 'blur' } ]

});

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      // await useResponse({ id: gridOptions.data[0].id, partial: 1, formData: ruleForm }, api.updateShopDetail, loading);
      editOpen.value = false;
      ElMessage.success('编辑成功');
      emit('refresh');
    } else {
      console.log('error submit!', fields);
    }
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};

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

<template>
  <el-drawer v-model="editOpen"
             :close-on-click-modal="false"
             :close-on-press-escape="false"
             :title="`商品监控 - 编辑 `"
             size="25%">
    <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        class="mx-2.5 mt-2.5"
        label-width="auto"
        status-icon>
      <el-form-item label="ASIN" prop="asin">
        <el-input v-model="ruleForm.asin"/>
      </el-form-item>
      <el-form-item label="SKU" prop="sku">
        <el-input v-model="ruleForm.sku"/>
      </el-form-item>
      <el-form-item label="店 铺" prop="shop">
        <el-input v-model="ruleForm.shop"/>
      </el-form-item>
      <el-form-item label="分 组" prop="group">
        <el-input v-model="ruleForm.group"/>
      </el-form-item>
      <el-form-item label="状 态" prop="status">
        <el-select v-model="ruleForm.status"/>
      </el-form-item>
      <el-form-item label="国 家" prop="country">
        <el-select v-model="ruleForm.country" placeholder="请选择国家">
          <el-option
              v-for="item in rowData.country"
              :key="item"
              :label="item"
              :value="item">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="更新频率" prop="frequency">
        <el-input-number v-model="ruleForm.frequency"/>
      </el-form-item>
      <el-form-item>
        <el-divider />
        <div class="flex flex-1 justify-end">
          <el-button :loading="loading" type="primary" @click="submitForm(ruleFormRef)">确 定</el-button>
          <el-button @click="resetForm(ruleFormRef)">重 置</el-button>
        </div>
      </el-form-item>
    </el-form>
  </el-drawer>
</template>

<style scoped>
:deep(.el-drawer .el-drawer__header) {
  border: none !important;
}
</style>