接口对接

zhouwx

2025-03-14 3533b11c19b628e45f26d25bedd7c82e0aa2037a

 src/views/templateManage/components/templateDialog.vue

@@ -11,53 +11,54 @@
      <el-form :model="state.form" size="default" ref="busRef" :rules="state.formRules" label-width="150px" >
        <el-row :gutter="24">
          <el-col :span="24">
            <el-form-item label="模板名称:" prop="name" >
              <el-input v-model="state.form.name" placeholder="请输入模板名称"></el-input>
            <el-form-item label="模板名称:" prop="templateName" >
              <el-input v-model="state.form.templateName" placeholder="请输入模板名称"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="创建部门:"  >
              <span style="font-size: 16px">{{state.form.deptName}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="签署类型:"  >
              <el-select
                  v-model="state.form.type"
                  placeholder="请选择"
                  style="width: 100%"
              >
        <div style="display: flex;align-items: center;justify-content: space-between">
          <el-form-item label="创建部门:"  >
            <span style="font-size: 16px">{{state.deptName}}</span>
          </el-form-item>
          <el-form-item label="签署类型:"  prop="typeId">
            <el-select
                v-model="state.form.typeId"
                placeholder="请选择"
                style="width: 100%"
            >
              <el-option
                  v-for="item in state.typeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  :key="item.id"
                  :label="item.typeName"
                  :value="item.id"
              />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
            </el-select>
          </el-form-item>
        </div>

        <el-row :gutter="24">
          <el-col :span="24">
            <el-form-item label="签名文件附件:" prop="name" >
            <el-form-item label="签名文件附件:" prop="fileList" >
              <el-upload
                  :auto-upload="false"
                  v-model:file-list="state.form.fileList"
                  :action="uploadFileUrl"
                  :file-list="state.fileList"
                  :headers="state.header"
                  :remove="handleRemove"
                  :on-success="handleAvatarSuccess"
                  :on-change="handleChange"
                  accept=".pdf,.word"
                  :limit="state.limit"
                  style="width: 230px"
              >
                <el-button type="primary" plain> 点击上传 </el-button>
                <template #tip>
                  <div class="el-upload__tip">只能上传pdf类型，最多上传1份。</div>
                </template>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="签名文件附件:" style="display: flex;flex-direction: column;align-items: flex-start">
        <el-form-item label="签署效果预览:" style="display: flex;flex-direction: column;align-items: flex-start">
          <div style="width: 500px;height: 100px;margin-left: 50px">

          </div>
@@ -77,6 +78,10 @@
import {ElMessage} from "element-plus";
import {listDept} from "@/api/system/dept";
import {listUser} from "@/api/system/user";
import {addTemplate, editTemplate} from "@/api/signAgreement/template";
import {addType, editType, getSignType} from "@/api/signAgreement/signType";
import {getInfo} from "@/api/login";
import {getToken} from "@/utils/auth";

const uploadFileUrl = ref(import.meta.env.VITE_APP_BASE_API + "/common/upload"); // 上传文件服务器地址
const { proxy } = getCurrentInstance();
@@ -89,50 +94,99 @@
const state = reactive({
  form: {
    id: '',
    deptId: '',
    deptName: '综合办',
    people: []
    templateName: '',
    typeId:null,
    deptId: null,
    filePath: '',
    fileList: []
  },
  typeList: [
    {
      value: '1',
      label: 'xx'
    }
  ],
  fileList: [],
  header: {
    Authorization: getToken()
  },
  deptName: '',
  typeList: [],
  limit: 1,
  formRules:{
    deptId: [{ required: true, trigger: "blur", message:'请选择部门' }],
    people: [{ required: true, trigger: "blur", message:'请选择签署人' }],
    templateName: [{ required: true, trigger: "blur", message:'请输入模板名称' }],
    typeId: [{ required: true, trigger: "blur", message:'请选择签署类型' }],
    fileList: [{ required: true, trigger: "blur", message:'请上传签名文件' }],
  },
})


const openDialog = async (type,value) => {
  await getSignTypeList()
  await getUserInfo()
  title.value = type === 'add' ? '新增' : '编辑'
  if(type === 'edit') {
    state.form = JSON.parse(JSON.stringify(value))
    if(state.form.filePath && state.form.fileName){
      const obj = {
        name: state.form.fileName,
        url : import.meta.env.VITE_APP_BASE_API + state.form.filePath
      }
      state.form.fileList = [obj]
    }else {
      state.form.fileList = []
    }

  }
  dialogVisible.value = true;
}

const getSignTypeList = async () => {
  const res = await getSignType()
  if(res.code == 200){
    state.typeList = res.data
  }else{
    ElMessage.warning(res.message)
  }
}
const getUserInfo = async () => {
  const res = await getInfo()
  if(res.code == 200){
    state.deptName = res.user.dept.deptName
    state.form.deptId = res.user.deptId
  }else{
    ElMessage.warning(res.message)
  }
}
const onSubmit = async () => {
  console.log('form',state.form)
  const valid = await busRef.value.validate();

  if(valid){
    const {id, ...data} = JSON.parse(JSON.stringify(state.form))
    // const res = await addWarehouse(data)
    // if(res.code === 200){
    //   ElMessage({
    //     type: 'success',
    //     message: '新增成功'
    //   });
    // }else{
    //   ElMessage.warning(res.message)
    // }
    emit("getList")
    busRef.value.clearValidate();
    reset();
    dialogVisible.value = false;
    if(title.value === '新增'){
      const {id,fileList, ...data} = JSON.parse(JSON.stringify(state.form))
      const res = await addTemplate(data)
      if(res.code === 200){
        ElMessage({
          type: 'success',
          message: '新增成功'
        });
      }else{
        ElMessage.warning(res.message)
      }
      emit("getList")
      busRef.value.clearValidate();
      reset();
      dialogVisible.value = false;
    }else if(title.value === '编辑'){
      const {...data} = JSON.parse(JSON.stringify(state.form))
      const res = await editTemplate(data)
      if(res.code === 200){
        ElMessage({
          type: 'success',
          message: '编辑成功'
        });
      }else{
        ElMessage.warning(res.message)
      }
      emit("getList")
      busRef.value.clearValidate();
      reset();
      dialogVisible.value = false;
    }

  }
}
@@ -146,28 +200,45 @@
const reset = () => {
  state.form = {
    id: '',
    name: '',
    remark: '',
    templateName: '',
    typeId:null,
    deptId: null,
    filePath: '',
    fileList: []
  }
}

const handleRemove = (file) => {
  const index = data.fileList.indexOf(file)
  const newFileList = data.fileList.slice()
  const index = state.form.fileList.indexOf(file)
  const newFileList = state.form.fileList.slice()
  newFileList.splice(index, 1)
  data.fileList = newFileList;
  state.form.fileList = newFileList;
}
const f = ref()
const handleChange = (file,fileList) => {
  console.log('file',file)
  let fileExtension = file.name.split('.').pop();
  if(fileExtension == 'pdf' || fileExtension == 'word'){
    f.value = file.raw
  }else {
    data.fileList = []
    state.form.fileList = []
    ElMessage.warning('仅可上传pdf或word文件')
  }
}
const handleAvatarSuccess = (res) => {
  if(res.code === 200){
    // ElMessage({
    //   type: 'success',
    //   message: '文件上传成功'
    // })
    state.form.filePath = res.fileName
  }else {
    state.form.fileList = []
    ElMessage({
      type: 'warning',
      message: res.message
    })
  }
}
defineExpose({
  openDialog
});