附件：真假上传

迷南。 2022-09-10 13:19 302阅读 0赞

新增的时候，上传存在前端一个list里面；删除是真删除，直接删除

编辑的时候，删除是假删除，把删除的数据id存在一个list里

watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAcXFfNDAwNTUyMDA_size_20_color_FFFFFF_t_70_g_se_x_16

  1. <template>
  2.   <div class="app-add">
  3.     <el-form
  4.       :model="ruleForm"
  5.       :label-position="labelPosition"
  6.       :rules="rules"
  7.       ref="ruleForm"
  8.       label-width="240px"
  9.       autocomplete='off'>
  10.       <el-form-item label="采购包或标段编号" prop="biddingId">
  11.         <el-input v-model.trim="ruleForm.biddingId" placeholder="请输入采购包或标段编号" class="input-text" maxlength="255"/>
  12.       </el-form-item>
  13.       <el-form-item label="采购包或标段名称" prop="biddingName">
  14.         <el-input v-model.trim="ruleForm.biddingName" placeholder="请输入采购包或标段名称" class="input-text" maxlength="255"/>
  15.       </el-form-item>
  16.       <el-form-item label="采购人名称" prop="purchaseName">
  17.         <el-input v-model="ruleForm.purchaseName" placeholder="请输入采购人名称" class="input-text" maxlength="255"/>
  18.       </el-form-item>
  19.       <el-form-item label="采购人代码" prop="purchaseCode">
  20.         <el-input v-model="ruleForm.purchaseCode" placeholder="请输入采购人代码" class="input-text" maxlength="255"/>
  21.       </el-form-item>
  22.       <el-form-item label="采购人所属的一级中央企业" prop="purchaseParentOrgCode">
  23.         <el-input v-model="ruleForm.purchaseParentOrgCode" placeholder="请输入采购人代码所属的一级中央企业" class="input-text"
  24.                   maxlength="255" disabled/>
  25.       </el-form-item>
  26.       <el-form-item label="采购人所属主要行业" required>
  27.         <el-row :gutter="10">
  28.           <el-col :span="9">
  29.             <el-form-item prop="firstcode">
  30.               <el-select
  31.                 v-model="ruleForm.firstcode"
  32.                 placeholder="请选择"
  33.                 class="select-text"
  34.                 @change="getType"
  35.                 style="width:100%"
  36.               >
  37.                 <el-option
  38.                   v-for="item in industryCodeOption"
  39.                   :key="item.firstcode"
  40.                   :label="item.firstname"
  41.                   :value="item.firstcode"
  42.                 />
  43.               </el-select>
  44.             </el-form-item>
  45.           </el-col>
  46.           <el-col class="line" :span="3"></el-col>
  47.           <el-col :span="9">
  48.             <el-form-item prop="secondcode">
  49.               <el-select
  50.                 v-model="ruleForm.secondcode"
  51.                 placeholder="请选择"
  52.                 class="select-text"
  53.                 style="width:100%"
  54.                 value-key="item"
  55.               >
  56.                 <el-option
  57.                   v-for="item in industrySecondOption"
  58.                   :key="item.secondcode"
  59.                   :label="item.secondname"
  60.                   :value="item.secondcode"
  61.                 />
  62.               </el-select>
  63.             </el-form-item>
  64.           </el-col>
  65.         </el-row>
  66.       </el-form-item>
  67.       <el-form-item label="采购组织形式" prop="purchaseForm">
  68.         <el-radio-group v-model="ruleForm.purchaseForm">
  69.           <el-radio :label="1">自主采购</el-radio>
  70.           <el-radio :label="2">委托采购</el-radio>
  71.         </el-radio-group>
  72.       </el-form-item>
  73.       <el-form-item label="采购方式" prop="purchaseType">
  74.         <el-radio-group v-model="ruleForm.purchaseType">
  75.           <el-radio :label="1">公开招标</el-radio>
  76.           <el-radio :label="2">邀请招标</el-radio>
  77.           <el-radio :label="3">竞争性谈判</el-radio>
  78.           <el-radio :label="4">单一来源采购</el-radio>
  79.           <el-radio :label="5">询价采购</el-radio>
  80.           <el-radio :label="6">其他</el-radio>
  81.         </el-radio-group>
  82.       </el-form-item>
  83.       <el-form-item
  84.         prop="singleSourcePurchaserType"
  85.         v-if="ruleForm.purchaseType === 4"
  86.         :rules="ruleForm.purchaseType === 4 ?
  87.       [{ required: true, message: '请选择单一来源采购属性', trigger: 'blur' }]:
  88.       [{required: false}]">
  89.          <span slot="label">单一来源采购属性
  90.         <el-tooltip placement="top">
  91.           <div slot="content">采购方式选择“单一来源采购”时，本字段为必填项。</div>
  92.           <i class="el-icon-warning" style="color: #0e1B50;"></i>
  93.         </el-tooltip>
  94.          </span>
  95.         <el-radio-group v-model="ruleForm.singleSourcePurchaserType">
  96.           <el-radio :label="'1'" @click.native.prevent="singleSourceClick('1')">一般单一来源</el-radio>
  97.           <el-radio :label="'2'" @click.native.prevent="singleSourceClick('2')">框架协议执行</el-radio>
  98.           <el-radio :label="'3'" @click.native.prevent="singleSourceClick('3')">统谈分签执行</el-radio>
  99.         </el-radio-group>
  100.       </el-form-item>
  101.       <el-form-item label="采购平台" prop="purchasePlatform">
  102.         <span slot="label">采购平台
  103.         <el-tooltip placement="top">
  104.           <div slot="content">如在采购平台采购则填平台全称，如没有在采购平台采购则填无</div>
  105.           <i class="el-icon-warning" style="color: #0e1B50;"></i>
  106.         </el-tooltip>
  107.         </span>
  108.         <el-input v-model.trim="ruleForm.purchasePlatform" placeholder="请输入采购平台" class="input-text" maxlength="255"/>
  109.       </el-form-item>
  110.       <el-form-item label="预算类型" prop="fundType">
  111.         <el-radio-group v-model="ruleForm.fundType" @change="clearFundScale">
  112.           <el-radio :label="1">有采购包或标段预算</el-radio>
  113.           <el-radio :label="2">仅有整体项目预算</el-radio>
  114.           <el-radio :label="3">有预估采购规模（标段预计金额）</el-radio>
  115.           <el-radio :label="4">无预算</el-radio>
  116.         </el-radio-group>
  117.       </el-form-item>
  118.       <el-form-item
  119.         label="采购包或标段预算/规模"
  120.         prop="fundScale"
  121.         :rules="ruleForm.fundType === 1 ?
  122.       [{ required: true, message: '请输入采购包或标段预算金额', trigger: 'blur' },
  123.       { pattern: /(^[\-0-9][0-9]*(.[0-9]+)?)$/, message: '请正确输入采购包或标段预算金额', trigger: 'blur' },
  124.       { pattern: /^[0-9]+(.?[0-9]{1,2})?$/, message: '最多填写两位小数', trigger: 'blur' }]:
  125.         [{ required: true, message: '请输入采购包或标段估算规模金额', trigger: 'blur' },
  126.       { pattern: /(^[\-0-9][0-9]*(.[0-9]+)?)$/, message: '请正确输入采购包或标段估算规模金额', trigger: 'blur' },
  127.       { pattern: /^[0-9]+(.?[0-9]{1,2})?$/, message: '最多填写两位小数', trigger: 'blur' }]">
  128.         <span slot="label">采购包或标段预算/规模
  129.         <el-tooltip placement="top">
  130.           <div slot="content">填写对应预算类型的采购包或标段预算/规模金额（单位：元），外币转化成人民币。当预算类型选择“有采购包或标段预算”时，填写采购包或标段预算金额；
  131.             <br/>当预算类型选择“仅有整体项目预算、有预估采购规模（标段预计金额）、无预算”时，填写采购包或标段估算规模金额。</div>
  132.           <i class="el-icon-warning" style="color: #0e1B50;"></i>
  133.         </el-tooltip>
  134.         </span>
  135.         <el-input v-model.trim="ruleForm.fundScale" placeholder="请输入采购包或标段预算/规模" class="input-text-short" maxlength="15"/>
  136.         <span>元</span>
  137.       </el-form-item>
  138.       <el-form-item label="评标/评价方法" prop="evaluationType">
  139.         <el-radio-group v-model="ruleForm.evaluationType" @change="changeData">
  140.           <el-radio :label="1">综合评分法</el-radio>
  141.           <el-radio :label="2">最低评标价法</el-radio>
  142.           <el-radio :label="3">其他</el-radio>
  143.         </el-radio-group>
  144.       </el-form-item>
  145.       <el-form-item
  146.         label="技术权重"
  147.         prop="technicalWeight"
  148.         v-if="ruleForm.purchaseType === 1 || ruleForm.purchaseType === 2"
  149.         :rules="ruleForm.purchaseType === 1 || ruleForm.purchaseType === 2 ?
  150.       [{ required: true, message: '请输入技术权重', trigger: 'blur' },
  151.        { pattern: /(^[\-0-9][0-9]*(.[0-9]+)?)$/, message: '请正确输入技术权重', trigger: 'blur'},
  152.        { pattern:/^(([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$/, message: '最多填写两位小数',trigger: 'blur' }]:
  153.        [{required: false},
  154.         { pattern: /(^[\-0-9][0-9]*(.[0-9]+)?)$/, message: '请正确输入技术权重', trigger: 'blur'},
  155.         { pattern:/^(([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$/, message: '最多填写两位小数',trigger: 'blur' }]">
  156.         <span slot="label">技术权重
  157.         <el-tooltip placement="top">
  158.           <div slot="content">【 】%，小数点后最多保留2位，采购方式选择“公开招标“或”邀请招标“时必填。<br/>技术权重与商务权重相加等于100。</div>
  159.           <i class="el-icon-warning" style="color: #0e1B50;"></i>
  160.         </el-tooltip>
  161.         </span>
  162.         <el-input
  163.           v-model.trim="ruleForm.technicalWeight"
  164.           placeholder="请输入技术权重"
  165.           class="input-text-short"
  166.           maxlength="255"
  167.         />
  168.         <span>%</span>
  169.       </el-form-item>
  170.       <el-form-item
  171.         label="商务权重"
  172.         prop="businessWeight"
  173.         v-if="ruleForm.purchaseType === 1 || ruleForm.purchaseType === 2"
  174.         :rules="ruleForm.purchaseType === 1 || ruleForm.purchaseType === 2 ?
  175.       [{ required: true, message: '请输入商务权重', trigger: 'blur' },
  176.        { pattern: /(^[\-0-9][0-9]*(.[0-9]+)?)$/, message: '请正确输入商务权重', trigger: 'blur'},
  177.        { pattern: /^(([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$/, message: '最多填写两位小数',trigger: 'blur' }]:
  178.         [{required: false},
  179.          { pattern: /(^[\-0-9][0-9]*(.[0-9]+)?)$/, message: '请正确输入技术权重', trigger: 'blur'},
  180.          { pattern:/^(([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$/, message: '最多填写两位小数',trigger: 'blur' }]">
  181.          <span slot="label">商务权重
  182.         <el-tooltip placement="top">
  183.           <div slot="content">【 】%，小数点后最多保留2位，采购方式选择“公开招标“、”邀请招标“时必填。商务权重包含价格权重，
  184.             <br/>技术权重与商务权重相加等于100。</div>
  185.           <i class="el-icon-warning" style="color: #0e1B50;"></i>
  186.         </el-tooltip>
  187.          </span>
  188.         <el-input
  189.           v-model.trim="ruleForm.businessWeight"
  190.           placeholder="请输入商务权重"
  191.           class="input-text-short"
  192.           maxlength="255"
  193.         />
  194.         <span>%</span>
  195.       </el-form-item>
  196.       <el-form-item
  197.         label="发标日期"
  198.         prop="biddingDate"
  199.         v-if="ruleForm.purchaseType === 1 || ruleForm.purchaseType === 2 || ruleForm.purchaseType === 3 || ruleForm.purchaseType === 5"
  200.         :rules="ruleForm.purchaseType === 1 || ruleForm.purchaseType === 2 || ruleForm.purchaseType === 3 || ruleForm.purchaseType === 5?
  201.       [{ required: true, message: '请选择公开招标公告、邀请招标公告、竞争性谈判公告、询价采购公告的发布日期', trigger: 'blur' }]:
  202.         [{required: false}]">
  203.          <span slot="label">发标日期
  204.         <el-tooltip placement="top">
  205.           <div slot="content">当采购方式为公开招标、邀请招标、竞争性谈判、询
  206.             <br/>价采购时，本字段必填。填写公开招标公告、邀请招
  207.             <br/>标公告、竞争性谈判公告、询价采购公告的发布日期。</div>
  208.           <i class="el-icon-warning" style="color: #0e1B50;"></i>
  209.         </el-tooltip>
  210.          </span>
  211.         <el-date-picker
  212.           v-model="ruleForm.biddingDate"
  213.           type="date"
  214.           value-format="yyyy-MM-dd HH:mm:ss"
  215.           format="yyyy-MM-dd"
  216.           placeholder="选择日期"
  217.           >
  218.         </el-date-picker>
  219.       </el-form-item>
  220.       <el-form-item
  221.         label="开标日期"
  222.         prop="bidOpeningDate"
  223.         v-if="ruleForm.purchaseType === 1 || ruleForm.purchaseType === 2 || ruleForm.purchaseType === 3 || ruleForm.purchaseType === 5"
  224.         :rules="ruleForm.purchaseType === 1 || ruleForm.purchaseType === 2 || ruleForm.purchaseType === 3 || ruleForm.purchaseType === 5?
  225.       [{ required: true, message: '请选择招标公告、邀请招标公告中确定的开标日期、竞争性谈判公告确定的谈判日期和询价采购公告中确定的报价截止日期。如因特殊原因存在多次开标，则选择最后一次开标日期', trigger: 'blur' }]:
  226.         [{required: false}]">
  227.         <span slot="label">开标日期
  228.         <el-tooltip placement="top">
  229.           <div slot="content">当采购方式为公开招标、邀请招标、竞争性谈判、询
  230.             <br/>价采购时，本字段必填。填写招标公告、邀请招标公
  231.             <br/>告中确定的开标日期、竞争性谈判公告确定的谈判日
  232.             <br />期和询价采购公告中确定的报价截止日期。如因特殊
  233.             <br />原因存在多次开标，则填写最后一次开标日期。</div>
  234.           <i class="el-icon-warning" style="color: #0e1B50;"></i>
  235.         </el-tooltip>
  236.         </span>
  237.         <el-date-picker
  238.           v-model="ruleForm.bidOpeningDate"
  239.           type="date"
  240.           value-format="yyyy-MM-dd HH:mm:ss"
  241.           format="yyyy-MM-dd"
  242.           placeholder="选择日期"
  243.           >
  244.         </el-date-picker>
  245.       </el-form-item>
  246.       <el-form-item label="标段异常状态" prop="biddingState">
  247.         <span slot="label">标段异常状态
  248.         <el-tooltip placement="top">
  249.           <div slot="content">当填报标段存在暂停、流标等情况时必填。</div>
  250.           <i class="el-icon-warning" style="color: #0e1B50;"></i>
  251.         </el-tooltip>
  252.         </span>
  253.         <el-radio-group v-model="ruleForm.biddingState" @change="changeData">
  254.           <el-radio :label="1" @click.native.prevent="biddingStateClick(1)">暂停（暂时停止，后续有可能继续）</el-radio>
  255.           <el-radio :label="2" @click.native.prevent="biddingStateClick(2)">流标（本标段招标终止；如项目继续，重新招标时重新编号）</el-radio>
  256.           <el-radio :label="3" @click.native.prevent="biddingStateClick(3)">废标</el-radio>
  257.         </el-radio-group>
  258.       </el-form-item>
  259.       <el-form-item
  260.         label="招标文件"
  261.         prop="invitationBiddingDocument"
  262.         ref="upload-file"
  263.         v-if="!oldDataFlag"
  264.         :rules="ruleForm.purchaseType === 1 || ruleForm.noFileType === '0'?
  265.         [{ required: true, message: '请选择招标文件', trigger: 'blur' }]:
  266.         [{required: false}]">
  267.           <span>
  268.             非公开发布的线下直签、现货采购、商城采购等少数类产品特性形成的线下直接签署合同的项目可不上传附件，
  269.             系统将自动在采购包或标段编号前增加非招标采购标识。否则招标文件附件必填。
  270.           </span>
  271.         <el-form-item label="是否线下直签、现货采购、商城采购" prop="noFileType">
  272.           <el-radio-group v-model="ruleForm.noFileType">
  273.             <el-radio :label="'0'" @click.native.prevent="isLineClick('0')">否</el-radio>
  274.             <el-radio :label="'1'" @click.native.prevent="isLineClick('1')">是</el-radio>
  275.           </el-radio-group>
  276.         </el-form-item>
  277.         <el-upload
  278.           class="upload-demo"
  279.           action="https://jsonplaceholder.typicode.com/posts/"
  280.           multiple
  281.           :on-preview="handlePreview"
  282.           :on-remove="handleRemove"
  283.           :before-remove="beforeRemove"
  284.           :auto-upload="false"
  285.           :on-change="handleStatus"
  286.           :on-exceed="handleExceed"
  287.           :show-file-list="false"
  288.           :http-request="uploadFile"
  289.           accept=".pdf,.doc,.ofd,.docx,.xls,.xlsx,.et,.wps"
  290.           :file-list="fileList">
  291.           <el-button size="small" type="primary">+点击上传</el-button>
  292.           <div slot="tip" class="el-upload__tip"><i>*</i>支持上传招标文件，支持pdf、ofd、doc、docx、xls、xlsx、et、wps格式文件</div>
  293.         </el-upload>
  294.         <el-table :data="attachments" border style="width: 750px">
  295.           <el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
  296.           <el-table-column prop="name" label="附件名称" align="center" width="400"></el-table-column>
  297.           <el-table-column label="进度" align="center">
  298.             <template slot-scope="scope">
  299.               <el-progress :percentage="scope.row.percentage"></el-progress>
  300.             </template>
  301.           </el-table-column>
  302.           <el-table-column label="操作" width="130" align="center">
  303.             <template slot-scope="scope">
  304.               <el-button type="text" size="small" @click="handlePreview(scope.row,2)" v-if="scope.row.name && scope.row.name.substring(scope.row.name.length-3) == 'pdf'">查看</el-button>
  305.               <el-button type="text" size="small" @click="handlePreview(scope.row,1)" v-if="scope.row.id">下载</el-button>
  306.               <el-button type="text" size="small" @click="handleDel(scope.row,scope.$index)">删除</el-button>
  307.             </template>
  308.           </el-table-column>
  309.         </el-table>
  310.       </el-form-item>
  311.       <el-form-item
  312.         label="招标文件"
  313.         prop="invitationBiddingDocument"
  314.         ref="upload-file"
  315.         v-else>
  316.           <span>
  317.             非公开发布的线下直签、现货采购、商城采购等少数类产品特性形成的线下直接签署合同的项目可不上传附件，
  318.             系统将自动在采购包或标段编号前增加非招标采购标识。否则招标文件附件必填。
  319.           </span>
  320.         <el-form-item label="是否线下直签、现货采购、商城采购" prop="noFileType">
  321.           <el-radio-group v-model="ruleForm.noFileType">
  322.             <el-radio :label="'0'" @click.native.prevent="isLineClick('0')">否</el-radio>
  323.             <el-radio :label="'1'" @click.native.prevent="isLineClick('1')">是</el-radio>
  324.           </el-radio-group>
  325.         </el-form-item>
  326.         <el-upload
  327.           class="upload-demo"
  328.           action="https://jsonplaceholder.typicode.com/posts/"
  329.           multiple
  330.           :on-preview="handlePreview"
  331.           :on-remove="handleRemove"
  332.           :before-remove="beforeRemove"
  333.           :auto-upload="false"
  334.           :on-change="handleStatus"
  335.           :on-exceed="handleExceed"
  336.           :show-file-list="false"
  337.           :http-request="uploadFile"
  338.           accept=".pdf,.doc,.ofd,.docx,.xls,.xlsx,.et,.wps"
  339.           :file-list="fileList">
  340.           <el-button size="small" type="primary">+点击上传</el-button>
  341.           <div slot="tip" class="el-upload__tip"><i>*</i>支持上传招标文件，支持pdf、ofd、doc、docx、xls、xlsx、et、wps格式文件</div>
  342.         </el-upload>
  343.         <el-table :data="attachments" border style="width: 750px">
  344.           <el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
  345.           <el-table-column prop="name" label="附件名称" align="center" width="400"></el-table-column>
  346.           <el-table-column label="进度" align="center">
  347.             <template slot-scope="scope">
  348.               <el-progress :percentage="scope.row.percentage"></el-progress>
  349.             </template>
  350.           </el-table-column>
  351.           <el-table-column label="操作" width="130" align="center">
  352.             <template slot-scope="scope">
  353.               <el-button type="text" size="small" @click="handlePreview(scope.row,2)" v-if="scope.row.name && scope.row.name.substring(scope.row.name.length-3) == 'pdf'">查看</el-button>
  354.               <el-button type="text" size="small" @click="handlePreview(scope.row,1)" v-if="scope.row.id">下载</el-button>
  355.               <el-button type="text" size="small" @click="handleDel(scope.row,scope.$index)">删除</el-button>
  356.             </template>
  357.           </el-table-column>
  358.         </el-table>
  359.       </el-form-item>
  360.       <el-form-item class="detail-btn">
  361.         <el-button @click="resetForm('ruleForm')" class="cancelBtn">取消</el-button>
  362.         <el-button @click="submitForm('ruleForm')" class="holdBtn">保存</el-button>
  363.       </el-form-item>
  364.     </el-form>
  365.   </div>
  366. </template>
  368. <script>
  369. import "@/assets/styles/tpoms.scss"
  370. import { addData, getDetail, getType, getSecondType, getSelectData, getCompanyInfo } from "@/api/purchase";
  371. import request from '@/utils/request';
  372. import { supplierFile } from "@/api/purchase/index";
  373. export default {
  374.   name: "PurchaseAdd",
  375.   data() {
  376.     // var check = (rule, value, callback) => {
  377.     //   if (this.attachments.length > 0 && (this.ruleForm.purchaseType !== 1 || this.ruleForm.noFileType !== 0)) {
  378.     //     callback();
  379.     //   }else{
  380.     //     return callback(new Error('请选择上传招标文件'));
  381.     //   }
  382.     // };
  383.     return {
  384.       id: '',
  385.       ruleForm: {
  386.         biddingId: "",
  387.         biddingName: "",
  388.         purchaseName: "",
  389.         purchaseCode: "",
  390.         purchaseParentOrgCode: "中国中化控股有限责任公司",
  391.         industryCode: "",
  392.         purchaseForm: 1,
  393.         purchaseType: 1,
  394.         purchasePlatform: "",
  395.         fundScale: "",
  396.         evaluationType: 1,
  397.         technicalWeight: "",
  398.         businessWeight: "",
  399.         industryName: "",
  400.         firstcode: "",
  401.         secondcode: "",
  402.         fundType: 1, // 预算类型
  403.         singleSourcePurchaserType: '',
  404.         biddingDate: '',
  405.         bidOpeningDate: '',
  406.         biddingState: '',
  407.         invitationBiddingDocument: [],
  408.         documentDeleteIds: [],
  409.         noFileType: ''
  410.       },
  411.       // 表单校验
  412.       rules: {
  413.         biddingId: [
  414.           { required: true, message: '请输入采购包或标段编号', trigger: 'blur' }
  415.         ],
  416.         biddingName: [
  417.           { required: true, message: '请输入采购包或标段名称', trigger: 'blur' }
  418.         ],
  419.         purchaseName: [
  420.           { required: true, message: '请输入采购人名称', trigger: 'blur' }
  421.         ],
  422.         purchaseCode: [
  423.           { required: true, message: '请输入采购人代码', trigger: 'blur' }
  424.         ],
  425.         purchaseParentOrgCode: [
  426.           { required: true, message: '请输入采购人代码所属的一级中央企业', trigger: 'blur' }
  427.         ],
  428.         firstcode: [
  429.           { required: true, message: '请选择采购人所属主要行业', trigger: 'change' }
  430.         ],
  431.         secondcode: [
  432.           { required: true, message: '请选择采购人所属主要行业', trigger: 'change' }
  433.         ],
  434.         purchaseForm: [
  435.           { required: true, message: '请选择采购组织形式', trigger: 'blur' }
  436.         ],
  437.         purchaseType: [
  438.           { required: true, message: '请选择采购方式', trigger: 'blur' }
  439.         ],
  440.         purchasePlatform: [
  441.           { required: true, message: "请输入采购平台，如在采购平台采购则填平台全称，如没有在采购平台采购则填无", trigger: "blur" }
  442.         ],
  443.         // fundScale: [
  444.         //   { required: true, message: "请输入采购包或标段预算/规模", trigger: "blur" },
  445.         //   { pattern: /(^[\-0-9][0-9]*(.[0-9]+)?)$/, message: "请正确输入采购包或标段预算/规模", trigger: "blur" },
  446.         //   { pattern: /^[0-9]+(.?[0-9]{1,2})?$/, message: "最多填写两位小数", trigger: "blur" }
  447.         // ],
  448.         evaluationType: [
  449.           { required: true, message: '请选择评标/评价方法', trigger: 'blur' }
  450.         ],
  451.         fundType: [
  452.           { required: true, message: '请选择预算类型', trigger: 'blur' }
  453.         ],
  454.         // invitationBiddingDocument:[
  455.         //   { required: true,validator: check, trigger: 'blur' }
  456.         // ],
  457.       },
  458.       labelPosition: 'right',
  459.       industryCodeOption: [],  // 一级
  460.       industrySecondOption: [],  // 二级
  461.       // 查询参数
  462.       queryParams: {
  463.         pageNo: 1,
  464.         pageNum: 1,
  465.         pageSize: 10,
  466.         type: 3
  467.       },
  468.       obj: {},
  469.       isChange: false,
  470.       // 上传 文件列表
  471.       fileList: [],
  472.       // 验证 文件 列表
  473.       attachments:[],
  474.       documentDeleteIds: [],
  475.       news: '',
  476.       queryParamsEdit: {},
  477.       oldDataFlag: false
  478.     };
  479.   },
  480.   watch: {
  481.     ruleForm: {
  482.       handler: function(nowVal, oldVal) {
  483.         for (let key in this.ruleForm) {
  484.           if (nowVal[key] != this.obj[key]) {
  485.             this.isChange = false
  486.             break
  487.           } else {
  488.             this.isChange = true
  489.           }
  490.         }
  491.       },
  492.       deep: true
  493.     },
  494.   },
  495.   created() {
  496.     this.id = this.$route.query.id;
  497.     this.news = this.$route.query.news;
  498.     if(this.news){
  499.       this.queryParamsEdit.tableType = this.$route.query.tableType;
  500.     }else{
  501.       this.queryParamsEdit = JSON.parse(sessionStorage.getItem('Purchase_QUERY_PARAMS'));
  502.     }
  503.     this.getType();
  504.     if (this.id) {
  505.       this.getDetail(this.id,this.queryParamsEdit.tableType);
  506.     }else{
  507.       this.loading = true
  508.       getCompanyInfo().then((response) => {
  509.         this.ruleForm.purchaseName = response.name;
  510.         this.ruleForm.purchaseCode = response.scode;
  511.         this.loading = false;
  512.       })
  513.       this.getSelectData();
  514.     }
  515.   },
  516.   methods: {
  517.     /** 详情 */
  518.     getDetail(id,tableType) {
  519.       this.loading = true
  520.       let detail = new Promise((resolve, reject) => {
  521.         getDetail(id,tableType).then((response) => {
  522.           for(let i = 0; i < response.data.documents.length;i++){
  523.             this.attachments = response.data.documents;
  524.             //有附件的情况可以让后台返回一下这个字段
  525.             this.attachments[i].percentage = 100;
  526.             this.attachments[i].name =  response.data.documents[i].docname;
  527.           }
  528.           resolve(response.data)
  529.           this.loading = false
  530.         })
  531.       })
  532.       let _this = this
  533.       detail.then((function(data) {
  534.         _this.ruleForm = data;
  535.         _this.oldDataFlag = data.oldDataFlag;
  536.         _this.ruleForm.invitationBiddingDocument = _this.attachments;
  537.         _this.ruleForm.firstcode = data.firstcode;
  538.         _this.ruleForm.purchaseParentOrgCode = "中国中化控股有限责任公司";
  539.         let secondcode = data.secondcode;
  540.         if (data.technicalWeight == null) {
  541.           _this.ruleForm.technicalWeight === '';
  542.         }
  543.         if (data.businessWeight == null) {
  544.           _this.ruleForm.businessWeight === '';
  545.         }
  546.         let pageSize = 0;
  547.         let pageNum = 0;
  548.         let secondData = {
  549.           firstcode: data.firstcode
  550.         }
  551.         /** 采购人代码所属主要行业*/
  552.         getSecondType(pageSize, pageNum, secondData).then(response => {
  553.           _this.industrySecondOption = response.data.list;
  554.           for (let i = 0; i < response.data.list.length; i++) {
  555.             if (secondcode == response.data.list[i].secondcode) {
  556.               _this.ruleForm.secondcode = secondcode
  557.             }
  558.           }
  559.           _this.loading = false
  560.         }).catch(res => {
  561.           _this.loading = false
  562.         })
  563.         _this.loading = false
  564.       })).catch(res => {
  565.         _this.loading = false
  566.       })
  567.     },
  568.     async addMechanism(){
  569.       let fileData = new FormData();
  570.       this.ruleForm.documentDeleteIds = (this.documentDeleteIds).join();  // 删除id
  571.       let _this = this;
  572.       if (_this.id) {
  573.         _this.ruleForm.id = _this.id;
  574.       }
  576.       const loading = this.$loading({
  577.         lock: true,
  578.         text: 'Loading',
  579.         spinner: 'el-icon-loading',
  580.         background: 'rgba(0, 0, 0, 0.7)'
  581.       })
  582.       if (this.ruleForm.purchaseType == 1 || this.ruleForm.purchaseType == 2) {
  583.         // 技术权重及商务权重之和为100
  584.         let technicalWeight = Number(_this.ruleForm.technicalWeight)
  585.         let businessWeight = Number(_this.ruleForm.businessWeight)
  586.         let sum = technicalWeight + businessWeight
  587.         if (sum !== 100) {
  588.           _this.msgError('技术权重及商务权重之和为100')
  589.           loading.close()
  590.           return false
  591.         }
  592.       }
  593.       // if(this.id){
  594.       //   if(_this.ruleForm.documents.length == 0){
  595.       //     _this.msgError('请上传招标附件')
  596.       //   }
  597.       // }else{
  598.       //   if(_this.ruleForm.invitationBiddingDocument.length == 0){
  599.       //     _this.msgError('请上传招标附件')
  600.       //   }
  601.       // }
  602.       _this.ruleForm.industryName = _this.ruleForm.secondcode;
  603.       _this.ruleForm.purchaseParentOrgCode = 41;
  604.       this.attachments.map((item, index) => {
  605.         if (item.raw) fileData.append('file', item.raw);
  606.       })
  607.       // fileData.append('documentDeleteIds',delData);
  608.       fileData.append('params',JSON.stringify(this.ruleForm));
  610.       try {
  611.         let res = await request.post('/purchaserInfo/save/purchaser', fileData);
  612.         if (res.code == 200) {
  613.           _this.msgSuccess(res.msg);
  614.           loading.close()
  615.           // setTimeout(function() {
  616.             _this.commonRoute()
  617.           // }, 1500)
  618.         }
  619.       }catch (e) {
  620.         loading.close();
  621.         _this.ruleForm.purchaseParentOrgCode = "中国中化控股有限责任公司";
  622.       }
  623.     },
  624.     /** 提交和编辑 */
  625.     submitForm(formName) {
  626.       this.$refs[formName].validate((valid) => {
  627.         if (valid) {
  628.           if(this.id){
  629.             if(this.attachments.length == 0){
  630.               // this.msgError('请上传招标附件')
  631.               this.commonDialog();
  632.             }else{
  633.               this.addMechanism();
  634.             }
  635.           }else{
  636.             if(this.ruleForm.invitationBiddingDocument.length == 0){
  637.               this.commonDialog();
  638.             }else{
  639.               this.addMechanism();
  640.             }
  641.           }
  642.         }
  643.       });
  644.     },
  645.     commonDialog(){
  646.       this.$confirm('请确认，该采购是否为非公开发布的线下直签、现货采购、商城采购等少数类产品特性形成的线下直接签署合同的项目?', '提示', {
  647.         confirmButtonText: '是',
  648.         cancelButtonText: '否',
  649.         type: 'warning'
  650.       }).then(() => {
  651.         this.addMechanism();
  652.       }).catch(() => {
  653.         // this.msgError('请上传招标附件')
  654.       });
  655.     },
  656.     /** 取消 */
  657.     resetForm(formName) {
  658.       this.$confirm('离开页面，所有修改内容将丢失!', '提示', {
  659.         confirmButtonText: '确认离开',
  660.         cancelButtonText: '继续编辑',
  661.         showClose: false,
  662.         callback: action => {
  663.           if (action === 'confirm') {
  664.             this.commonRoute()
  665.           }
  666.         }
  667.       })
  668.     },
  669.     /** 公共跳转路由 */
  670.     commonRoute() {
  671.       let tableType = this.tableType
  672.       if (this.news) {
  673.         this.$router.go(-1);
  674.       } else {
  675.         let pageNum = this.pageNum
  676.         let pageSize = this.pageSize
  677.         this.$router.push({ path: '/purchase/index', query: { tableType, pageNum, pageSize } })
  678.       }
  679.     },
  680.     /**技术权重,商务权重的数据清空 */
  681.     changeData() {
  682.       this.ruleForm.technicalWeight = ''
  683.       this.ruleForm.businessWeight = ''
  684.     },
  685.     /**解决单选不必填的BUG */
  686.     singleSourceClick(number) {
  687.       if (this.ruleForm.singleSourcePurchaserType === number) {
  688.         this.ruleForm.singleSourcePurchaserType = "";
  689.       } else {
  690.         this.ruleForm.singleSourcePurchaserType = number;
  691.       }
  692.     },
  693.     isLineClick(number){
  694.       if (this.ruleForm.noFileType === number) {
  695.         this.ruleForm.noFileType = "";
  696.       } else {
  697.         this.ruleForm.noFileType = number;
  698.       }
  699.     },
  700.     /**解决单选不必填的BUG */
  701.     biddingStateClick(number) {
  702.       if (this.ruleForm.biddingState === number) {
  703.         this.ruleForm.biddingState = "";
  704.       } else {
  705.         this.ruleForm.biddingState = number;
  706.       }
  707.     },
  708.     /** 获取采购人代码所属主要行业*/
  709.     getType(event) {
  710.       this.loading = true
  711.       let pageSize = 0
  712.       let pageNum = 0
  713.       // 二级下拉
  714.       if (event !== '' || event !== undefined || event !== null) {
  715.         let data = {
  716.           firstcode: event
  717.         }
  718.         getSecondType(pageSize, pageNum, data).then(response => {
  719.           this.industrySecondOption = response.data.list
  720.           this.ruleForm.secondcode = ''
  721.           this.loading = false
  722.         })
  723.       }
  724.       // 一级下拉
  725.       if (event == undefined) {
  726.         let data = {}
  727.         getType(pageSize, pageNum, data).then(response => {
  728.           this.industryCodeOption = response.data.list
  729.           this.loading = false
  730.         })
  731.       }
  732.     },
  733.     /**采购人名称,代码*/
  734.     getSelectData() {
  735.       getSelectData(this.queryParams).then((response) => {
  736.         const { code, data, total } = response
  737.         this.total = response.total;
  738.         // if(this.id == undefined){
  739.         //   this.ruleForm.purchaseName = response.name
  740.         //   this.ruleForm.purchaseCode = response.scode
  741.         // }
  742.         this.ruleForm.firstcode = response.firstcode
  743.         let secondcode = response.secondcode
  744.         let pageSize = 0
  745.         let pageNum = 0
  746.         let secondData = {
  747.           firstcode: response.firstcode
  748.         }
  749.         /** 采购人代码所属主要行业*/
  750.         getSecondType(pageSize, pageNum, secondData).then(response => {
  751.           this.industrySecondOption = response.data.list
  752.           for (let i = 0; i < response.data.list.length; i++) {
  753.             if (secondcode == response.data.list[i].secondcode) {
  754.               this.ruleForm.secondcode = secondcode
  755.             }
  756.           }
  757.           this.loading = false
  758.         })
  759.         this.loading = false
  760.       })
  761.         .catch(function(error) {
  762.           this.loading = false
  763.         })
  764.     },
  765.     /** 公共二级下拉框代码*/
  766.     commonSecondList() {
  767.       /** 采购人代码所属主要行业*/
  768.       getSecondType(pageSize, pageNum, secondData).then(response => {
  769.         this.industrySecondOption = response.data.list;
  770.         for (let i = 0; i < response.data.list.length; i++) {
  771.           if (secondcode == response.data.list[i].secondcode) {
  772.             this.ruleForm.secondcode = secondcode;
  773.           }
  774.         }
  775.         this.loading = false;
  776.       })
  777.     },
  778.     /** 清空采购包或标段预算/规模*/
  779.     clearFundScale(){
  780.       this.ruleForm.fundScale = '';
  781.     },
  782.     /** 浏览 */
  783.     handlePreview(row,index) {
  784.       //hasOwnProperty方法返回一个布尔值,判断自身属性是否存在,循环的是那个列表
  785.       console.log(row,'row')
  786.       if(row.hasOwnProperty('raw')){
  787.         let pdfUrl = URL.createObjectURL(row.raw)
  788.         window.open(pdfUrl);
  789.       }else{
  790.         supplierFile(row.id,index).then(response => {
  791.           window.open(response.msg);
  792.         });
  793.       }
  794.     },
  795.     /** 文件必传验证 */
  796.     handleStatus(file, fileList){
  797.       console.log(file,'file')
  798.       // this.$refs.upload.active = true
  799.       let patrn = /^[^`!@#$%^&*<>]+$/
  800.       if (!patrn.test(file.name)) {// 如果包含特殊字符返回false
  801.         this.msgError('文件名称不能有特殊字符');
  802.         return false;
  803.       }
  804.       for(let i = 0; i<this.attachments.length; i++){
  805.         if(file.name === this.attachments[i].name){
  806.           // this.msgSuccess('替换' + file.name);
  807.           this.ruleForm.files = this.attachments[i];
  808.           return
  809.         }
  810.       }
  811.       file.percentage = 98;
  812.       setTimeout(() => {
  813.         file.percentage = 100;
  814.       },300)
  815.       this.attachments.push(file);
  816.       this.ruleForm.invitationBiddingDocument = this.attachments;
  817.     },
  818.     uploadFile(file){
  819.       // console.log(file.file)
  820.     },
  821.     handleRemove(file, fileList) {
  822.       this.attachments = fileList;
  823.     },
  824.     handleExceed(files, fileList) {
  825.       // this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
  826.     },
  827.     beforeRemove(file, fileList) {
  828.       return this.$confirm(`确定移除 ${ file.name }？`);
  829.     },
  830.     /** 删除附件 */
  831.     handleDel(params,index){
  832.       if(params.hasOwnProperty('id')){
  833.         this.documentDeleteIds.push(params.id)
  834.       }
  835.       this.attachments.splice(index,1)
  836.       this.ruleForm.invitationBiddingDocument = this.attachments;
  837.     },
  838.   }
  839. }
  840. </script>
  841. <style scoped lang="scss">
  842. .iconStyle{
  843.   display: flex;
  844.   flex-direction: row;
  845. }
  846. </style>

发表评论

表情：
评论列表 （有 0 条评论，302人围观）

还没有评论，来说两句吧...

相关阅读

    相关 附件：真假上传

    新增的时候，上传存在前端一个list里面；删除是真删除，直接删除 编辑的时候，删除是假删除，把删除的数据id存在一个list里 ![watermark_type_ZHJva

    迷南。迷南。/ 0 赞/ 303 阅读

    相关 servlet实现上传附件

    一、简单介绍 使用 Servlet上传附件 原理上还是蛮简单的，首先获取上传的附件对象，然后做一些简单处理 后写入到指定路径的磁盘中。 二、准备条件 common-io.

    红太狼红太狼/ 0 赞/ 388 阅读