shuhi-ui/src/views/riskControl/restrictConfig/index.vue

<template>
  <ele-page flex-table>
    <ele-card flex-table header="访问限制规则">
      <el-form
        ref="formRef"
        style="max-width: 520px"
        :model="form"
        label-width="220px"
      >
        <el-form-item label="每人每日最多扫描" prop="maxEverybodyEverydayScan">
          <el-input v-model="form.maxEverybodyEveryDayScan">
            <template #append>次</template>
          </el-input>
        </el-form-item>
        <el-form-item label="每人每月最多可卖" prop="maxEverybodyEveryMonthNum">
          <el-input v-model="form.maxEverybodyEveryMonthNum">
            <template #append>单</template>
          </el-input>
        </el-form-item>
        <el-form-item label="每人每日最多可卖" prop="maxEverybodyEveryDayNum">
          <el-input v-model="form.maxEverybodyEveryDayNum">
            <template #append>单</template>
          </el-input>
        </el-form-item>
        <el-form-item
          label="未提交订单每人最多可扫描"
          prop="maxEverybodyScanUnSubmit"
        >
          <el-input v-model="form.maxEverybodyScanUnSubmit">
            <template #append>次</template>
          </el-input>
        </el-form-item>
        <el-form-item label="单个订单删除本数" prop="maxEverybodyOrderDelete">
          <el-input v-model="form.maxEverybodyOrderDelete">
            <template #append>本</template>
          </el-input>
        </el-form-item>
        <el-form-item label="每人每日最多输入ISBN(次数）" prop="maxEverybodyEveryDayInput">
          <el-input v-model="form.maxEverybodyEveryDayInput">
            <template #append>本</template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            style="min-width: 100px"
            type="primary"
            @click="submitForm(formRef)"
            v-permission="'recycleLogistics:abnormalSetting:update'"
          >
            确认修改
          </el-button>
        </el-form-item>
      </el-form>
    </ele-card>
  </ele-page>
</template>

<script setup>
  import { ref, reactive, onMounted, getCurrentInstance } from 'vue';
  import { ElMessage } from 'element-plus';

  const { proxy } = getCurrentInstance();
  const formRef = ref(null);
  const form = reactive({
    maxEverybodyEveryDayScan: '',
    maxEverybodyEveryMonthNum: '',
    maxEverybodyEveryDayNum: '',
    maxEverybodyScanUnSubmit: '',
    maxEverybodyOrderDelete: '',
    maxEverybodyEveryDayInput: ''
  });

  // 获取数据
  const fetchData = () => {
    proxy.$http
      .get('/user/userRequestLimit/getSet')
      .then((res) => {
        if (res.data.code === 200) {
          Object.assign(form, res.data.data);
        }
      })
      .catch((error) => {
        console.error('获取数据失败:', error);
        ElMessage.error('获取数据失败');
      });
  };

  // 提交表单
  const submitForm = (formEl) => {
    if (!formEl) return;
    formEl.validate((valid, fields) => {
      if (valid) {
        proxy.$http
          .post('/user/userRequestLimit/update', form)
          .then(() => {
            ElMessage.success('保存成功');
          })
          .catch((error) => {
            console.error('保存失败:', error);
            ElMessage.error('保存失败');
          });
      } else {
        console.log('error submit!', fields);
      }
    });
  };

  onMounted(() => {
    fetchData();
  });
</script>