dbsd_kczx/src/views/zy/zyInfo/components/ZyInfoDetailForm.vue

<template>
  <a-spin :spinning="confirmLoading">
    <a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol">
      <a-row>
        <a-col :span="24">
          <a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-row>
              <div class="wrapper-back">
                <div class="wrapper-title">基本信息</div>
                <a-col :span="24">
                  <a-form-item label="作业题目">
                    <span class="spanb-word">{{ formData.title }}</span>
                  </a-form-item>
                </a-col>
                <a-col :span="24" v-if="dataKhnr.length > 0">
                  <a-form-item label="考察内容">
                    <a-table :columns="columnsKhnr" class="spanb-word" rowKey="id" :data-source="dataKhnr" :pagination="false" />
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="作业截止时间" :labelCol="labelCol2" :wrapperCol="wrapperCol2">
                    <span class="spanb-word">{{ formData.endTime }}</span>
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="作业发布时间" :labelCol="labelCol2" :wrapperCol="wrapperCol2">
                    <span class="spanb-word">{{ formData.startTime }}</span>
                  </a-form-item>
                </a-col>
                <a-col :span="24">
                  <a-form-item label="作业要求">
                    <div class="spanb-word" style="margin-top:5px" v-html="formData.content"></div>
                  </a-form-item>
                </a-col>
                <a-col :span="24" v-if="formData.filePath">
                  <a-form-item label="参考资料">
                    <span>{{ lastString(formData.filePath) }}</span>
                    <a-button type="primary" style="margin-left: 10px" @click="downLoad(formData.filePath)">下载</a-button>
                  </a-form-item>
                </a-col>

                <a-col :span="24" v-show="formData.sturead == '1' && formData.pfbz">
                  <a-form-item label="评分标准" layout="inline">
                    <div class="spanb-word" style="margin-top:5px" v-html="formData.pfbz"></div>
                  </a-form-item>
                </a-col>
              </div>
              <a-col :span="24" v-if="formData.wwtgl" class="wrapper-back">
                <div class="wrapper-title">查重设置</div>
                <a-form-item layout="inline" style="margin-left: 100px">
                  <a-form-item label="检测通过率" :labelCol="labelCol3" :wrapperCol="wrapperCol3">
                    <span style="padding: 7px 10px"></span>
                    <a-input-number v-model:value="formData.wwtgl" placeholder="检测通过率" style="width: 60%" :max="100" :min="0" disabled>
                      <template #addonAfter> % </template>
                    </a-input-number>
                  </a-form-item>
                  <a-form-item label="比对库设置" :labelCol="labelCol3" :wrapperCol="wrapperCol3">
                    <div style="padding: 7px 20px">维普</div>
                    <div style="padding: 0 10px">
                      <a-checkbox v-model:checked="formData.wwcc" style="margin-left: 10px;" disabled>
                        <span class="Check-title">维普资源库查重：</span><br>
                        <span class="Check-concent">中文科技期刊数据库、硕博学位论文库、高校特色论文库、互联网数据资源/互联网文档资源</span>
                      </a-checkbox>
                      <a-checkbox v-model:checked="formData.xncc" disabled>
                        <span class="Check-title">学校作业库查重：</span><br>
                        <span class="Check-concent">历届学生提供的作业库内查重</span>
                      </a-checkbox>
                      <a-checkbox v-model:checked="formData.nwcc" disabled>
                        <span class="Check-title">本次作业查重：</span><br>
                        <span class="Check-concent">本次学生提交的作业间查重</span>
                      </a-checkbox>
                    </div>
                    <div style="padding: 7px 20px">AIGC</div>
                    <div style="padding: 0 10px">
                      <a-checkbox v-model:checked="formData.aigccc" style="margin-left: 10px" disabled>
                         <span class="Check-title">AIGC查重：</span><br>
                         <span class="Check-concent">检测作业是否部分或全部由AI模型生成</span>
                     </a-checkbox>
                    </div>
                  </a-form-item>
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </a-col>
        <!-- <a-col :span="24">
          <span class="spana">作业分值：{{formData.score?formData.score:'未填写'}}</span>
        </a-col>
        <a-col :span="24">
          <span class="spana">描述：
            <span v-if="formData.content">
              {{formData.content}}
            </span>
            <span v-else>暂无内容</span>
          </span>
        </a-col>
        <a-col :span="12">
          <span class="spana">附件：
            <span v-if="formData.filePath">
              <a-button  :ghost="true" type="primary" preIcon="ant-design:download" size="small" @click="downloadFile(formData.filePath)"> 下载 </a-button>
            </span>
            <span v-else>暂无内容</span>
          </span>
        </a-col>
        <a-col :span="12">
          <span class="spana">上传时间：{{formData.startTime}} ~ {{formData.endTime}}</span>
        </a-col>
        <a-col :span="12">
          <span class="spana">是否网络查重：{{formData.wwcc=='0'?'否':'是'}}</span> <span class="spanb">网络通过率：{{formData.wwtgl?formData.wwtgl+"%":'未配置'}}</span>
        </a-col>
        <a-col :span="12">
          <span class="spana">是否课程内查重：{{formData.nwcc=='0'?'否':'是'}}</span> <span class="spanb">网络通过率：{{formData.nwtgl?formData.nwtgl+"%":'未配置'}}</span>
        </a-col>
        <a-col :span="12">
          <span class="spana">Aigc是否查重：{{formData.aigccc=='0'?'否':'是'}}</span> <span class="spanb">网络通过率：{{formData.aigctgl?formData.aigctgl+"%":'未配置'}}</span>
        </a-col>
        <a-col :span="12">
          <span class="spana">是否校内查重：{{formData.xncc=='0'?'否':'是'}}</span> <span class="spanb">网络通过率：{{formData.xntgl?formData.xntgl+"%":'未配置'}}</span>
        </a-col> -->
      </a-row>
    </a-form>
  </a-spin>
</template>

<script lang="ts" setup>
import { ref, reactive, defineExpose, nextTick, defineProps, computed, onMounted, unref } from 'vue';
import { defHttp } from '/@/utils/http/axios';
import { useMessage } from '/@/hooks/web/useMessage';
import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
import { getValueType } from '/@/utils';
import { saveOrUpdate } from '../ZyInfo.api';
import { Form } from 'ant-design-vue';
import { useRouter } from 'vue-router';
import dayjs, { Dayjs } from 'dayjs';
import JUpload from '/@/components/Form/src/jeecg/components/JUpload/JUpload.vue';
import { getFileAccessHttpUrl } from '/@/utils/common/compUtils';

import { downloadFile } from '/@/utils/common/renderUtils';
//当前路由信息
const { currentRoute } = useRouter();
const { query } = unref(currentRoute);
const { rwbh } = query; //获取传递参数
const props = defineProps({
  formDisabled: { type: Boolean, default: false },
  formData: { type: Object, default: () => {} },
  formBpm: { type: Boolean, default: true },
});
const formRef = ref();
const useForm = Form.useForm;
const emit = defineEmits(['register', 'ok']);
const dataKhnr = ref<any>([]);
const formData = reactive<Record<string, any>>({
  id: '',
  title: '',
  zyType: '0',
  content: '',
  filePath: '',
  startTime: '',
  endTime: '',
  wwcc: '0',
  wwtgl: undefined,
  nwcc: '0',
  nwtgl: undefined,
  aigccc: '0',
  aigctgl: undefined,
  rwbh: '',
  xncc: '0',
  xntgl: undefined,
});
const { createMessage } = useMessage();
const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } });
const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } });
// const labelCol2 = ref<any>({ xs: { span: 24 }, sm: { span: 3 } });
// const wrapperCol2 = ref<any>({ xs: { span: 24 }, sm: { span: 20 } });

const labelCol2 = reactive({
  sm: { span: 10 },
});
const wrapperCol2 = reactive({
  sm: { span: 10 },
});
const labelCol3 = reactive({
  sm: { span: 4 },
});
const wrapperCol3 = reactive({
  sm: { span: 20 },
});

const confirmLoading = ref<boolean>(false);
//表单验证
const validatorRules = {
  title: [{ required: true, message: '请输入作业名称!' }],
  // zyType: [{ required: true, message: '请输入类型!'},],
  startTime: [{ required: true, message: '请输入开始时间!' }],
  endTime: [{ required: true, message: '请输入结束时间!' }],
  wwcc: [{ required: true, message: '请输入外网是否查重!' }],
  wwtgl: [{ required: false }, { pattern: /^-?\d+\.?\d*$/, message: '请输入数字!' }],
  nwcc: [{ required: true, message: '请输入内网查重!' }],
  nwtgl: [{ required: false }, { pattern: /^-?\d+\.?\d*$/, message: '请输入数字!' }],
  aigccc: [{ required: true, message: '请输入aigc查重!' }],
  aigctgl: [{ required: false }, { pattern: /^-?\d+\.?\d*$/, message: '请输入数字!' }],
  xncc: [{ required: true, message: '请输入aigc查重!' }],
  xntgl: [{ required: false }, { pattern: /^-?\d+\.?\d*$/, message: '请输入数字!' }],
};
const { resetFields, validate, validateInfos } = useForm(formData, validatorRules, { immediate: false });
const disabledDate = (current: Dayjs) => {
  return current && current < dayjs().subtract(1, 'days').endOf('day');
};
// 表单禁用
const disabled = computed(() => {
  if (props.formBpm === true) {
    if (props.formData.disabled === false) {
      return false;
    } else {
      return true;
    }
  }
  return props.formDisabled;
});

const columnsKhnr = [
  {
    title: '序号',
    dataIndex: 'no',
    key: 'no',
    customRender: (text) => {
      return text.index + 1;
    },
    width: 80,
  },
  {
    title: '章次',
    dataIndex: 'title',
    key: 'title',
  },
  {
    title: '节次',
    dataIndex: 'twoTitle',
    key: 'twoTitle',
  },
];

function downLoad(file) {
  if (file) {
    let url = getFileAccessHttpUrl(file);
    if (url) {
      window.open(url);
    }
  } else {
    createMessage.warning('暂无文件或文件上传中');
  }
}

/**
 * 新增
 */
function add() {
  edit({ rwbh });
}

/**
 * 编辑
 */
function edit(record) {
  nextTick(() => {
    resetFields();
    //赋值
    Object.assign(formData, record);
    handleKcnr(formData.kcnr);
  });
}

function lastString(record) {
  console.log('😓', record);
  const parts = record.split('/');
  console.log('🧔', parts);
  return parts[parts.length - 1];
}
/**
 * 提交数据
 */
async function submitForm() {
  // 触发表单验证
  await validate();
  confirmLoading.value = true;
  const isUpdate = ref<boolean>(false);
  //时间格式化
  let model = formData;
  if (model.id) {
    isUpdate.value = true;
  }
  //循环数据
  for (let data in model) {
    //如果该数据是数组并且是字符串类型
    if (model[data] instanceof Array) {
      let valueType = getValueType(formRef.value.getProps, data);
      //如果是字符串类型的需要变成以逗号分割的字符串
      if (valueType === 'string') {
        model[data] = model[data].join(',');
      }
    }
  }

  if (model.wwcc == '1') {
    if (!model.wwtgl) {
      createMessage.warning('网络通过率不能为空');
      confirmLoading.value = false;
      return;
    }
  }
  if (model.nwcc == '1') {
    if (!model.nwtgl) {
      createMessage.warning('内网通过率不能为空');
      confirmLoading.value = false;
      return;
    }
  }
  if (model.aigccc == '1') {
    if (!model.aigctgl) {
      createMessage.warning('AIGC通过率不能为空');
      confirmLoading.value = false;
      return;
    }
  }
  if (model.xncc == '1') {
    if (!model.xntgl) {
      createMessage.warning('校内通过率不能为空');
      confirmLoading.value = false;
      return;
    }
  }

  await saveOrUpdate(model, isUpdate.value)
    .then((res) => {
      if (res.success) {
        createMessage.success(res.message);
        emit('ok');
      } else {
        createMessage.warning(res.message);
      }
    })
    .finally(() => {
      confirmLoading.value = false;
    });
}

//选择考察内容
function handleKcnr(kcnr) {
  if (kcnr) {
    defHttp.get({ url: '/teachingunitcontent/kcTeachingUnitContentOne/getAllList', params: { id: kcnr } }).then((res) => {
      console.log('🤦‍♀️', res);
      dataKhnr.value = res;
    });
  } else {
    dataKhnr.value = [];
  }
}

defineExpose({
  add,
  edit,
  submitForm,
});
</script>

<style lang="less" scoped>
.antd-modal-form {
  min-height: 300px !important;
  overflow-y: auto;
  padding: 24px 24px 24px 24px;
}
.spanSm {
  top: -22px;
  position: inherit;
  padding: 0 0 0 164px;
  color: #a9a9a9;
}
.spana {
  margin-left: 30px;
  line-height: 30px;
}
.spanb {
  margin-left: 30px;
  line-height: 30px;
}
.spanb-word {
  color: #999999;
}
.wrapper-back {
  background: #fafafa;
  border-radius: 10px;
  margin-top: 10px;
  padding-top: 15px;
  width: 100%;
}
.wrapper-title {
  font-size: 18px;
  border-left: 4px solid #1ab394;
  font-weight: bold;
  padding-left: 20px;
  margin-bottom: 20px;
}
.Check-title{
  color: #333;
  font-weight: bold;
}
.Check-concent{
  color: #999;
}
</style>