index.vue 43 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146
  1. <template>
  2. <section>
  3. <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
  4. <el-form :inline="true">
  5. <el-form-item :label="$t('he-tong-lie-biao')" class="toolbar_formitem_n1"></el-form-item>
  6. <!-- 合同编号/名称 -->
  7. <el-form-item>
  8. <div style="display: flex;align-items: center;height: 40px;">
  9. <el-input v-model="keyword" class="input-with-select" :placeholder="keyword == 1 ? $t('qing-shu-ru-he-tong-bian-hao') : $t('qing-shu-ru-he-tong-ming-cheng')" clearable size="small">
  10. <el-select slot="prepend" v-model="searchField" :placeholder="$t('defaultText.pleaseChoose')" style="width:120px">
  11. <el-option :label="$t('he-tong-ming-cheng')" :value="0"></el-option>
  12. <el-option :label="$t('contractno')" :value="1"></el-option>
  13. </el-select>
  14. <el-button slot="append" @click="searchFilter" icon="el-icon-search"></el-button>
  15. </el-input>
  16. </div>
  17. </el-form-item>
  18. <!-- 合同类型 -->
  19. <el-form-item>
  20. <span style="margin-left:5px;margin-right:5px;color:#606266;">{{ $t('he-tong-lei-xing') }}</span>
  21. <el-select v-model="typeName" style="width:120px;" :placeholder="$t('defaultText.pleaseChoose')" @change="searchFilter" size="small" clearable>
  22. <el-option v-for="item in typeList" :key="item.id" :label="item.typeName" :value="item.id"></el-option>
  23. </el-select>
  24. </el-form-item>
  25. <!-- 状态 -->
  26. <el-form-item>
  27. <span style="margin-left:5px;margin-right:5px;color:#606266;">{{$t('state.states')}}</span>
  28. <el-select v-model="status" style="width:120px;" :placeholder="$t('defaultText.pleaseChoose')" @change="searchFilter" size="small" clearable>
  29. <el-option v-for="item,index in statusList" :key="item.label" :label="item.label" :value="index"></el-option>
  30. </el-select>
  31. </el-form-item>
  32. <!-- 创建时间 -->
  33. <el-form-item>
  34. <span style="margin-left:5px;margin-right:5px;color:#606266;">{{$t('creationtime')}}</span>
  35. <el-date-picker
  36. style="width:240px;"
  37. v-model="dateArray"
  38. type="daterange"
  39. size="small"
  40. range-separator="-"
  41. :start-placeholder="$t('interval')"
  42. :end-placeholder="$t('interval')"
  43. value-format="yyyy-MM-dd"
  44. clearable
  45. @change="searchFilter"
  46. ></el-date-picker>
  47. </el-form-item>
  48. <el-form-item>
  49. <span style="margin-left:5px;margin-right:5px;color:#606266;">下笔回款日期</span>
  50. <el-date-picker
  51. style="width:240px;"
  52. v-model="paymentDate"
  53. type="daterange"
  54. size="small"
  55. :start-placeholder="$t('interval')"
  56. :end-placeholder="$t('interval')"
  57. value-format="yyyy-MM-dd"
  58. clearable
  59. @change="searchFilter"
  60. ></el-date-picker>
  61. </el-form-item>
  62. <el-form-item style="float:right;">
  63. <el-dropdown>
  64. <el-link type="primary" :underline="false">{{$t('viewmore')}}<i class="el-icon-arrow-down el-icon--right"></i></el-link>
  65. <el-dropdown-menu slot="dropdown">
  66. <el-dropdown-item v-if="permissions.contractType"><el-link type="primary" :underline="false" @click="typeEdit()">{{$t('bian-ji') + $t('types')}}</el-link></el-dropdown-item>
  67. <el-dropdown-item v-if="permissions.contractImport"><el-link type="primary" :underline="false" @click="importDialog = true">{{$t('dao-ru')}}</el-link></el-dropdown-item>
  68. <el-dropdown-item v-if="permissions.contractExport"><el-link type="primary" :underline="false" @click="exportContract()">{{$t('export.export')}}</el-link></el-dropdown-item>
  69. </el-dropdown-menu>
  70. </el-dropdown>
  71. </el-form-item>
  72. <el-form-item style="float:right;" v-if="permissions.contractNew">
  73. <el-link type="primary" :underline="false" @click="newlyAdd()">{{ $t('xin-zeng-he-tong') }}</el-link>
  74. </el-form-item>
  75. </el-form>
  76. </el-col>
  77. <el-table :data="contractList" v-loading="listLoading" :height="tableHeight" border highlight-current-row>
  78. <el-table-column prop="number" :label="$t('contractno')" min-width="190"></el-table-column>
  79. <el-table-column prop="name" :label="$t('he-tong-ming-cheng')" min-width="190"></el-table-column>
  80. <el-table-column prop="amounts" :label="$t('contractamount')" min-width="130" align="right" header-align="center">
  81. <span slot-scope="scope">¥ {{scope.row.amounts ? scope.row.amounts.toFixed(2) : '0.00'}}</span>
  82. </el-table-column>
  83. <el-table-column prop="payment" label="已回款金额" min-width="130" align="right" header-align="center">
  84. <span slot-scope="scope">¥ {{scope.row.payment ? scope.row.payment.toFixed(2) : '0.00'}}</span>
  85. </el-table-column>
  86. <el-table-column prop="payment" label="已回款进度" min-width="130" align="right" header-align="center">
  87. <span slot-scope="scope">{{scope.row.payment ? (100*scope.row.payment/scope.row.amounts).toFixed(1) + '%': '0%'}}</span>
  88. </el-table-column>
  89. <el-table-column prop="nextPaymentDate" label="下笔回款日期" min-width="130" align="right" header-align="center">
  90. <span slot-scope="scope">{{scope.row.nextPaymentDate ? scope.row.nextPaymentDate : '-'}}</span>
  91. </el-table-column>
  92. <el-table-column prop="nextPaymentAmount" label="下笔回款金额" min-width="130" align="right" header-align="center">
  93. <span slot-scope="scope">{{scope.row.nextPaymentAmount?'¥'+scope.row.nextPaymentAmount.toFixed(2) : '-'}}</span>
  94. </el-table-column>
  95. <el-table-column prop="typeName" :label="$t('he-tong-lei-xing')" min-width="140" align="center"></el-table-column>
  96. <el-table-column prop="status" :label="$t('state.states')" min-width="100" align="center">
  97. <template slot-scope="scope">
  98. <span :style="statusList[scope.row.status].color">{{statusList[scope.row.status].label}}</span>
  99. </template>
  100. </el-table-column>
  101. <el-table-column prop="indate" :label="$t('creationtime')" min-width="100" align="center"></el-table-column>
  102. <el-table-column width="300" :label="$t('operation')" align="left" fixed="right">
  103. <template slot-scope="scope">
  104. <el-button v-if="permissions.contractView || permissions.contractManagement" size="mini" @click="lookover(scope.row)">{{$t('cha-kan')}}</el-button>
  105. <el-button v-if="permissions.contractManagement" size="mini" @click="editContract(scope.row)" type="primary">{{$t('bian-ji')}}</el-button>
  106. <el-button v-if="permissions.contractAudit && (scope.row.status == 1 || scope.row.status == 3)" size="mini" @click="process(scope.row,0)" type="success">{{$t('btn.through')}}</el-button>
  107. <el-button v-if="permissions.contractAudit && (scope.row.status == 1 || scope.row.status == 3)" size="mini" @click="processR(scope.row,2)" type="danger">{{$t('btn.rejected')}}</el-button>
  108. </template>
  109. </el-table-column>
  110. </el-table>
  111. <el-col :span="24" class="toolbar">
  112. <el-pagination
  113. @size-change="handleSizeChange"
  114. @current-change="handleCurrentChange"
  115. :page-sizes="[20 , 50 , 80 , 100]"
  116. :page-size="size"
  117. layout="total, sizes, prev, pager, next"
  118. :total="total"
  119. style="float:right;"
  120. ></el-pagination>
  121. </el-col>
  122. <el-dialog :title="dialogTitle + $t('he-tong')" :visible.sync="addDialog" v-if="addDialog" :close-on-click-modal="false" customClass="customWidth" width="900px">
  123. <div style="height: 72vh;overflow-y: auto;overflow-x: hidden;">
  124. <el-form ref="contractForm" :model="contractForm" :rules="rules" label-width="120px" class="contractForm">
  125. <el-form-item :label="$t('contractno')">
  126. <el-input v-model="contractForm.number" :disabled="contractForm.status == 0" :maxlength="50" style="width:260px;" show-word-limit :placeholder="$t('peaseenterthe')" clearable @input="searchProject"></el-input>
  127. <span style="margin-left:20px;">关联项目</span>
  128. <el-select v-model="contractForm.projectId" filterable clearable style="width:300px;" :disabled="contractForm.status == 0">
  129. <el-option v-for="item in projectList" :key="item.id" :label="item.projectName + '\u3000' + (item.projectCode == null?'':item.projectCode)" :value="item.id" >
  130. <span style="float: left; color: #8492a6; font-size: 13px;">{{ item.projectCode }}</span>
  131. <span style="float: right;">{{ item.projectName }}</span>
  132. </el-option>
  133. </el-select>
  134. </el-form-item>
  135. <el-form-item :label="$t('he-tong-ming-cheng')" prop='name'>
  136. <el-input v-model="contractForm.name" :disabled="contractForm.status == 0" :maxlength="100" show-word-limit :placeholder="$t('peaseenterthe')" clearable></el-input>
  137. </el-form-item>
  138. <el-form-item :label="$t('contractamount')">
  139. <el-input v-model="contractForm.amounts" :disabled="contractForm.status == 0" id="contract_amount" :placeholder="$t('peaseenterthe')" @keyup.native="restrictNumber('contract_amount')" clearable>
  140. <span slot="prefix">¥</span>
  141. </el-input>
  142. </el-form-item>
  143. <el-form-item :label="$t('he-tong-lei-xing')">
  144. <el-select v-model="contractForm.typeId":disabled="contractForm.status == 0" :placeholder="$t('defaultText.pleaseChoose')" style="width:100%">
  145. <el-option v-for="item in typeList" :key="item.id" :label="item.typeName" :value="item.id"></el-option>
  146. </el-select>
  147. </el-form-item>
  148. <el-form-item :label="$t('schedulestarttime')">
  149. <el-date-picker
  150. :disabled="contractForm.status == 0"
  151. v-model="contractForm.startDate"
  152. value-format="yyyy-MM-dd"
  153. type="date"
  154. :picker-options="{disabledDate: disabledStart}"
  155. :placeholder="$t('optiondate')">
  156. </el-date-picker>
  157. <span style="float:right;">{{$t('scheduleendtime')}}
  158. <el-date-picker
  159. :disabled="contractForm.status == 0"
  160. style="margin-left: 15px;"
  161. v-model="contractForm.endDate"
  162. value-format="yyyy-MM-dd"
  163. type="date"
  164. :picker-options="{disabledDate: disabledEnd}"
  165. :placeholder="$t('optiondate')">
  166. </el-date-picker>
  167. </span>
  168. </el-form-item>
  169. <el-form-item :label="$t('bei-zhu')">
  170. <el-input v-model="contractForm.remarks" :disabled="contractForm.status == 0" :placeholder="$t('peaseenterthe')" type="textarea" :rows="3" clearable></el-input>
  171. </el-form-item>
  172. <el-form-item label="回款计划">
  173. <el-table :data="contractPaymentList" size="small" :key="Math.random()" :height="'300px'" show-header="false" style="margin-top:10px;">
  174. <el-table-column prop="isPayed" >
  175. <template slot-scope="scope">
  176. <el-checkbox v-model="scope.row.isPayed" >已回款</el-checkbox>
  177. </template>
  178. <template slot="header" >
  179. <span style="font-size:14px;font-weight:normal;">是否已回款</span>
  180. </template>
  181. </el-table-column>
  182. <el-table-column prop="payDate" label="回款日期" width="210">
  183. <template slot-scope="scope">
  184. <div><el-date-picker type="date" v-model="scope.row.payDate" style="width:200px;" :placeholder="$t('optiondate')" value-format="yyyy-MM-dd"></el-date-picker></div>
  185. </template>
  186. </el-table-column>
  187. <el-table-column prop="amount" label="回款金额">
  188. <template slot-scope="scope">
  189. <el-input v-model="scope.row.amount" :id="'payment_amount'+scope.$index" :placeholder="$t('peaseenterthe')" maxlength="10" clearable>
  190. <span slot="prefix">¥</span>
  191. </el-input>
  192. </template>
  193. </el-table-column>
  194. <el-table-column width="80">
  195. <template slot-scope="scope">
  196. <el-button icon="el-icon-delete" size="mini" style="margin-left:10px;" @click.stop.native="deleteItem(scope.$index)"></el-button>
  197. </template>
  198. <template slot="header" >
  199. <el-link type="primary" :underline="false" @click="addItem">{{ $t('addTian') }}</el-link>
  200. </template>
  201. </el-table-column>
  202. </el-table>
  203. </el-form-item>
  204. <el-form-item label-width="0" class="contractFiles">
  205. <div class="contractFiles_title">{{ $t('fu-jian') }}
  206. <el-upload style="float:right;margin-right:5%;" ref="uploadFile" action="#" :http-request="httpRequest" :on-change="fileChange" :auto-upload="false" :show-file-list="false">
  207. <el-link type="primary">{{ $t('xin-zeng-fu-jian') }}</el-link>
  208. </el-upload>
  209. </div>
  210. <el-table :data="fileList" :header-cell-style="{'font-weight':'normal'}" highlight-current-row
  211. max-height="240" style="width: 100%;margin-top:10px;margin-bottom:15px">
  212. <el-table-column :label="$t('headerTop.serialNumber')" min-width="40" align="center">
  213. <template slot-scope="scope">
  214. <div>{{scope.$index + 1}}</div>
  215. </template>
  216. </el-table-column>
  217. <el-table-column :label="$t('filenames')" prop="name" min-width="140"></el-table-column>
  218. <!-- <el-table-column label="文件大小" min-width="60">
  219. <template slot-scope="scope">
  220. <div>{{scope.$index + 1}}</div>
  221. </template>
  222. </el-table-column> -->
  223. <el-table-column :label="$t('operation')" min-width="40">
  224. <template slot-scope="scope">
  225. <el-link @click="fileDelete(scope.row)" type="primary">{{$t('btn.delete')}}</el-link>
  226. </template>
  227. </el-table-column>
  228. </el-table>
  229. </el-form-item>
  230. </el-form>
  231. </div>
  232. <div slot="footer" class="dialog-footer;">
  233. <el-button @click.native="deleteContract()" style="float:left" v-if="dialogTitle == $t('bian-ji')">{{$t('btn.delete')}}</el-button>
  234. <el-button @click.native="addDialog = false">{{$t('btn.cancel')}}</el-button>
  235. <el-button type="primary" @click="submitInsert()" :loading="submitLoading">{{$t('btn.submit')}}</el-button>
  236. </div>
  237. </el-dialog>
  238. <el-dialog :title="$t('cha-kan-he-tong')" :visible.sync="lookoverDialog" v-if="lookoverDialog" :close-on-click-modal="false" customClass="customWidth" width="900px">
  239. <div style="height: 72vh;overflow-y: auto;overflow-x: hidden;">
  240. <el-form label-width="100px" class="lookoverContract clearfix">
  241. <el-form-item :label="$t('contractno')">
  242. {{contractForm.number}}
  243. </el-form-item>
  244. <el-form-item :label="$t('he-tong-ming-cheng')">
  245. {{contractForm.name}}
  246. </el-form-item>
  247. <el-form-item :label="$t('contractamount')">
  248. ¥ {{contractForm.amounts}}
  249. </el-form-item>
  250. <el-form-item :label="$t('he-tong-lei-xing')">
  251. {{contractForm.typeName}}
  252. </el-form-item>
  253. <el-form-item :label="$t('state.states')">
  254. {{statusList[contractForm.status].label}}
  255. </el-form-item>
  256. <el-form-item :label="$t('dismissreason')" v-if="contractForm.status == 2">
  257. <span v-if="userNameNeedTranslate == 1">
  258. <span><ww-open-data type='userName' :openid='contractForm.msg.name'></ww-open-data></span>
  259. <span>{{contractForm.msg.text}}</span>
  260. </span>
  261. <span v-else>
  262. {{contractForm.msg ? contractForm.msg : ''}}
  263. </span>
  264. </el-form-item>
  265. <el-form-item :label="$t('founder')">
  266. <span v-if="user.userNameNeedTranslate == 1"><ww-open-data type='userName' :openid='contractForm.creatorName'></ww-open-data></span>
  267. <span v-else>{{contractForm.creatorName}}</span>
  268. </el-form-item>
  269. <el-form-item :label="$t('creationtime')">
  270. {{contractForm.indate}}
  271. </el-form-item>
  272. <el-form-item :label="$t('schedulestarttime')">
  273. {{contractForm.startDate}}
  274. </el-form-item>
  275. <el-form-item :label="$t('scheduleendtime')">
  276. {{contractForm.endDate}}
  277. </el-form-item>
  278. <el-form-item style="width:100%" :label="$t('bei-zhu')">
  279. {{contractForm.remarks}}
  280. </el-form-item>
  281. <el-form-item style="width:100%" label="回款计划">
  282. <el-table :data="contractPaymentList" size="small" :key="Math.random()" :height="'300px'" show-header="false" style="margin-top:10px;">
  283. <el-table-column prop="isPayed" >
  284. <template slot-scope="scope">
  285. {{ scope.row.isPayed?'已回款':'未回款' }}
  286. </template>
  287. <template slot="header" >
  288. <span style="font-size:14px;font-weight:normal;">是否已回款</span>
  289. </template>
  290. </el-table-column>
  291. <el-table-column prop="payDate" label="回款日期" width="210">
  292. <template slot-scope="scope">
  293. <div>{{ scope.row.payDate }}</div>
  294. </template>
  295. </el-table-column>
  296. <el-table-column prop="amount" label="回款金额">
  297. <template slot-scope="scope">
  298. <div>{{ scope.row.amount }}</div>
  299. </template>
  300. </el-table-column>
  301. </el-table>
  302. </el-form-item>
  303. <el-form-item label-width="0" class="contractFiles">
  304. <div class="contractFiles_title">{{ $t('fu-jian') }}</div>
  305. <el-table :data="fileList" :header-cell-style="{'font-weight':'normal'}" highlight-current-row
  306. max-height="240" style="width: 100%;margin-top:10px;margin-bottom:30px">
  307. <el-table-column :label="$t('headerTop.serialNumber')" min-width="40" align="center">
  308. <template slot-scope="scope">
  309. <div>{{scope.$index + 1}}</div>
  310. </template>
  311. </el-table-column>
  312. <el-table-column :label="$t('filenames')" prop="name" min-width="140"></el-table-column>
  313. <!-- <el-table-column label="文件大小" min-width="60">
  314. <template slot-scope="scope">
  315. <div>{{scope.$index + 1}}</div>
  316. </template>
  317. </el-table-column> -->
  318. <el-table-column :label="$t('operation')" min-width="40">
  319. <template slot-scope="scope">
  320. <el-link @click="fileDownload(scope.row)" type="primary">{{$t('other.download')}}</el-link>
  321. </template>
  322. </el-table-column>
  323. </el-table>
  324. </el-form-item>
  325. </el-form>
  326. </div>
  327. </el-dialog>
  328. <el-dialog :title="$t('he-tong-lei-xing-guan-li')" :visible.sync="typeDialog" v-if="typeDialog" customClass="customWidth" width="500px">
  329. <el-table :data="typeList" highlight-current-row height="400" style="width: 100%;">
  330. <el-table-column type="index" width="60" :label="$t('headerTop.serialNumber')">
  331. <template slot-scope="scope">{{ scope.$index + 1 }}</template>
  332. </el-table-column>
  333. <el-table-column prop="typeName"></el-table-column>
  334. <el-table-column :label="$t('operation')" width="150">
  335. <template slot-scope="scope">
  336. <el-button size="small" type="primary" @click="typeItemEdit(scope.row)">{{$t('bian-ji')}}</el-button>
  337. <el-button size="small" type="danger" @click="typeItemDelete(scope.row)">{{$t('btn.delete')}}</el-button>
  338. </template>
  339. </el-table-column>
  340. </el-table>
  341. <div slot="footer" class="dialog-footer;">
  342. <el-button type="primary" @click="typeDialog = false">{{$t('Shutdown')}}</el-button>
  343. <el-button type="primary" @click="typeItemAdd()">{{ $t('xin-zeng-he-tong-lei-xing') }}</el-button>
  344. </div>
  345. <el-dialog :title="typeTitle == this.$t('add') ? $t('xin-zeng-he-tong-lei-xing') : $t('bian-ji-he-tong-lei-xing')" :visible.sync="typeItemDialog" v-if="typeItemDialog" append-to-body width="400px">
  346. <div style="height: 12vh;overflow-y: auto;overflow-x: hidden;">
  347. <el-input v-model="typeItemForm.typeName" :maxlength="200"></el-input>
  348. </div>
  349. <div slot="footer" class="dialog-footer;">
  350. <el-button type="primary" @click="typeItemDialog = false">{{$t('btn.cancel')}}</el-button>
  351. <el-button type="primary" @click="typeItemSubmit()">{{$t('btn.determine')}}</el-button>
  352. </div>
  353. </el-dialog>
  354. </el-dialog>
  355. <el-dialog :title="$t('dao-ru-he-tong')" :visible.sync="importDialog" v-if="importDialog" width="30%">
  356. <!-- 模板? -->
  357. <p>1. {{$t('other.download')}}
  358. <el-link type="primary" style="margin-left:5px;" :underline="false" :href="'./upload/'+$t('he-tong-guan-li-dao-ru-mo-ban')+'.xlsx'" :download="$t('he-tong-guan-li-dao-ru-mo-ban')+'.xlsx'">{{$t('he-tong-guan-li-dao-ru-mo-ban')+ '.xlsx'}}</el-link>
  359. </p>
  360. <div slot="footer" class="dialog-footer" style="text-align:center;">
  361. <el-upload ref="upload" action="#" :limit="1" :http-request="importContract" :show-file-list="false">
  362. <el-button type="primary" :loading="importLoading">{{ $t('dao-ru-he-tong') }}</el-button>
  363. </el-upload>
  364. </div>
  365. </el-dialog>
  366. <el-dialog :title="$t('defaultText.pleaseEnterTheReason')" v-if="denyReasonDialog" :visible.sync="denyReasonDialog" :close-on-click-modal="false" customClass="customWidth" width="500px">
  367. <div>
  368. <el-input type="textarea" v-model="denyReason" rows="2" :placeholder="$t('reasonforyourdecisiontoreject')" />
  369. </div>
  370. <div slot="footer" class="dialog-footer">
  371. <el-button @click="denyReasonDialog = false" >{{$t('btn.cancel')}}</el-button>
  372. <el-button type="primary" @click="process(null,2)" >{{$t('btn.submit')}}</el-button>
  373. </div>
  374. </el-dialog>
  375. </section>
  376. </template>
  377. <script>
  378. export default {
  379. data() {
  380. return {
  381. paymentDate: null,
  382. contractPaymentList: [],
  383. user: JSON.parse(sessionStorage.getItem("user")),
  384. permissions: JSON.parse(sessionStorage.getItem("permissions")),
  385. searchField: 0,
  386. keyword: '',
  387. typeName: '',
  388. status: '',
  389. dateArray: [],
  390. typeList: [],
  391. contractList: [],
  392. listLoading: false,
  393. statusList: [
  394. {label:this.$t('state.approved'),color: 'color:#67c23a;'},
  395. {label:this.$t('state.WaitingAudit'),color: 'color:#e6a23c;'},
  396. {label:this.$t('state.rejected'),color: 'color:#f56c6c;'},
  397. // {label:this.$t('other.importWaitingForReview'),color: 'color:#e6a23c;'},
  398. ],
  399. typeDialog: false,
  400. typeTitle: this.$t('add'),
  401. typeItemDialog: false,
  402. typeItemForm: {typeName: ''},
  403. denyReasonDialog: false,
  404. denyReason: '',
  405. denyrow: null,
  406. dialogTitle: this.$t('add'),
  407. addDialog: false,
  408. lookoverDialog: false,
  409. submitLoading: false,
  410. contractForm: {
  411. number: '',
  412. name: '',
  413. amounts: '',
  414. typeId: null,
  415. remarks: '',
  416. startDate: '',
  417. endDate: ''
  418. },
  419. rules:{
  420. name: [{ required: true, message: this.$t('pleaseentername'), trigger: "blur" }],
  421. },
  422. fileList: [],
  423. importDialog: false,
  424. importLoading: false,
  425. projectList:[],
  426. page: 1,
  427. size: 20,
  428. total: 0,
  429. tableHeight: 0
  430. }
  431. },
  432. created() {
  433. let height = window.innerHeight;
  434. this.tableHeight = height - 180;
  435. const that = this;
  436. window.onresize = function temp() {
  437. that.tableHeight = window.innerHeight - 185;
  438. };
  439. },
  440. mounted() {
  441. this.getProjectList();
  442. this.getContractList()
  443. this.getContractType()
  444. },
  445. methods: {
  446. // test(row){
  447. // console.log('test',row);
  448. // // this.$refs.uploadFile.submit()
  449. // },
  450. restrictNumber(targetId) {
  451. let inpu = document.getElementById(targetId);
  452. inpu.value = inpu.value.replace(/[^\d.]/g, ""); //仅保留数字和"."
  453. inpu.value = inpu.value.replace(/\.{2,}/g, "."); //两个连续的"."仅保留第一个"."
  454. inpu.value = inpu.value.replace(".", "$#*").replace(/\./g,'').replace('$#*','.');//去除其他"."
  455. inpu.value = inpu.value.replace(/^(\d+)\.(\d\d).*$/, '$1.$2');;//限制只能输入两个小数
  456. if (inpu.value.indexOf(".") < 0 && inpu.value != "") { //首位是0的话去掉
  457. inpu.value = parseFloat(inpu.value);
  458. }
  459. if(inpu.value.split('.')[0].length > 9){
  460. inpu.value = inpu.value.split('.')[0].substring(0,9) + (inpu.value.split('.')[1] ? '.' + inpu.value.split('.')[1] : '')
  461. this.contractForm.amounts = inpu.value
  462. }
  463. },
  464. searchProject() {
  465. console.log(this.contractForm.number);
  466. //按合同编号去匹配项目编号,自动加载关联项目
  467. if (this.contractForm.number) {
  468. var matchItem = this.projectList.filter(p=>p.projectCode == this.contractForm.number);
  469. if (matchItem.length > 0) {
  470. this.contractForm.projectId = matchItem[0].id;
  471. this.contractForm.name = matchItem[0].projectName;
  472. this.contractForm.amount = matchItem[0].contractAmount;
  473. }
  474. }
  475. },
  476. //删除合同回款情况
  477. deleteItem(index) {
  478. this.contractPaymentList.splice(index,1);
  479. },
  480. //添加合同回款情况
  481. addItem() {
  482. let p = 0;
  483. this.contractPaymentList.push( { contractId:this.contractForm.id, isPayed:false,payDate: null, amount:0.0});
  484. },
  485. getProjectList() {
  486. this.http.post('/contract/getProjectList',{},
  487. res => {
  488. if(res.code == 'ok'){
  489. this.projectList = res.data;
  490. }else{
  491. this.$message({
  492. message: res.msg,
  493. type: 'error'
  494. })
  495. }
  496. },err => {
  497. this.$message({
  498. message: err,
  499. type: 'error'
  500. })
  501. })
  502. },
  503. disabledStart(date){
  504. if(this.contractForm.endDate){
  505. if(date > new Date(this.contractForm.endDate)){
  506. return true
  507. }else{
  508. return false
  509. }
  510. }else{
  511. return false
  512. }
  513. },
  514. disabledEnd(date){
  515. if(this.contractForm.startDate){
  516. if(date < new Date(this.contractForm.startDate)){
  517. return true
  518. }else{
  519. return false
  520. }
  521. }else{
  522. return false
  523. }
  524. },
  525. searchFilter(){
  526. this.page = 1
  527. this.getContractList()
  528. },
  529. handleSizeChange(val){
  530. this.size = val
  531. this.page = 1
  532. this.getContractList()
  533. },
  534. handleCurrentChange(val){
  535. this.page = val;
  536. this.getContractList()
  537. },
  538. importContract(item){
  539. let str = item.file.name.split('.')
  540. let format = str[str.length - 1];
  541. if(format != "xls" && format != "xlsx"){
  542. this.$message({
  543. message: this.$t('other.PleaseselecttheXLSorXLSXfile'),
  544. type: 'error'
  545. })
  546. }else{
  547. this.importLoading = true
  548. let formData = new FormData();
  549. formData.append("file", item.file);
  550. formData.append("userId", this.user.id);
  551. this.http.uploadFile('/contract/importContract',formData,
  552. res => {
  553. this.$refs.upload.clearFiles();
  554. this.importLoading = false;
  555. if(res.code == 'ok'){
  556. this.importDialog = false
  557. this.$message({
  558. message: this.$t('other.importSuccess'),
  559. type: 'success'
  560. })
  561. this.getContractList()
  562. }else{
  563. this.$message({
  564. message: res.msg,
  565. type: 'error'
  566. })
  567. }
  568. },err => {
  569. this.importLoading = false;
  570. this.$message({
  571. message: err,
  572. type: 'error'
  573. })
  574. })
  575. }
  576. },
  577. exportContract(){
  578. let parameter = {}
  579. if(this.typeName){
  580. parameter.typeName = this.typeName
  581. }
  582. if(this.keyword){
  583. if(this.searchField){
  584. parameter.number = this.keyword
  585. }else{
  586. parameter.name = this.keyword
  587. }
  588. }
  589. if(this.status !== ''){
  590. parameter.status = this.status
  591. }
  592. if(this.dateArray && this.dateArray.length == 2){
  593. parameter.startDate = this.dateArray[0]
  594. parameter.endDate = this.dateArray[1]
  595. }
  596. this.http.post('/contract/ExportContract',parameter,
  597. res => {
  598. if(res.code == 'ok'){
  599. let filePath = res.data;
  600. const a = document.createElement('a'); // 创建a标签
  601. a.setAttribute('download', this.$t('he-tong-dao-chu') + '.xlsx');// download属性
  602. a.setAttribute('href', filePath);// href链接
  603. a.click(); //自执行点击事件
  604. a.remove();
  605. }else{
  606. this.$message({
  607. message: res.msg,
  608. type: 'error'
  609. })
  610. }
  611. },err => {
  612. this.$message({
  613. message: err,
  614. type: 'error'
  615. })
  616. })
  617. },
  618. typeEdit(){
  619. this.typeDialog = true
  620. },
  621. typeItemAdd(){
  622. if(this.typeList.length == 20){
  623. this.$message({
  624. message: '合同类型最多只能创建20个',
  625. type: 'error'
  626. })
  627. return
  628. }
  629. this.typeTitle = this.$t('add')
  630. this.typeItemForm = {typeName: ''}
  631. this.typeItemDialog = true
  632. },
  633. typeItemEdit(row){
  634. this.typeTitle = this.$t('bian-ji')
  635. this.typeItemForm = JSON.parse(JSON.stringify(row))
  636. this.typeItemDialog = true
  637. },
  638. typeItemDelete(row){
  639. this.$confirm(this.$t('que-ding-yao-shan-chu-ci-tiao-he-tong-lei-xing-ma'), this.$t('other.prompts'), {
  640. confirmButtonText: this.$t('btn.determine'),
  641. cancelButtonText: this.$t('btn.cancel'),
  642. type: 'warning'
  643. }).then(() => {
  644. this.http.post('/contractType/deleteContractType',{
  645. deleteId: row.id
  646. },res => {
  647. if(res.code == 'ok'){
  648. this.getContractType()
  649. this.$message({
  650. type: 'success',
  651. message: this.$t('message.successfullyDeleted') + '!'
  652. });
  653. }else{
  654. this.$message({
  655. type: 'error',
  656. message: res.msg
  657. });
  658. }
  659. },err => {
  660. this.$message({
  661. type: 'error',
  662. message: err
  663. });
  664. })
  665. }).catch(() => {
  666. this.$message({
  667. type: 'info',
  668. message: this.$t('thedeletionhasbeencancelled')
  669. });
  670. });
  671. },
  672. typeItemSubmit(){
  673. this.http.post('/contractType/changeContractType',this.typeItemForm,
  674. res => {
  675. if(res.code == 'ok'){
  676. this.typeItemDialog = false
  677. this.getContractType()
  678. this.$message({
  679. message: this.typeTitle == this.$t('add') ? this.$t('newsuccess') : this.$t('editsuccess'),
  680. type: 'success'
  681. })
  682. }else{
  683. this.$message({
  684. message: res.msg,
  685. type: 'error'
  686. })
  687. }
  688. },err => {
  689. this.$message({
  690. message: err,
  691. type: 'error'
  692. })
  693. })
  694. },
  695. newlyAdd(){
  696. this.dialogTitle = this.$t('add')
  697. this.contractForm = {
  698. number: '',
  699. name: '',
  700. amounts: '',
  701. typeId: null,
  702. remarks: '',
  703. startDate: '',
  704. endDate: ''
  705. }
  706. this.fileList = []
  707. this.addDialog = true
  708. },
  709. editContract(row){
  710. this.dialogTitle = this.$t('bian-ji')
  711. this.contractForm = JSON.parse(JSON.stringify(row))
  712. this.fileList = this.contractForm.files ? this.contractForm.files : []
  713. for(let i in this.fileList){
  714. this.fileList[i].name = this.fileList[i].documentName
  715. }
  716. this.addDialog = true;
  717. this.getContractPaymentList();
  718. },
  719. getContractPaymentList() {
  720. this.contractPaymentList = [];
  721. this.http.post('/contract-payment/getList',{contractId: this.contractForm.id},
  722. res => {
  723. if(res.code == 'ok'){
  724. this.contractPaymentList = res.data;
  725. }else{
  726. this.$message({
  727. message: res.msg,
  728. type: 'error'
  729. })
  730. }
  731. },err => {
  732. this.$message({
  733. message: err,
  734. type: 'error'
  735. })
  736. })
  737. },
  738. deleteContract(){
  739. this.$confirm(this.$t('que-ding-yao-shan-chu-gai-he-tong-ma'), this.$t('other.prompts'), {
  740. confirmButtonText: this.$t('btn.determine'),
  741. cancelButtonText: this.$t('btn.cancel'),
  742. type: 'warning'
  743. }).then(() => {
  744. this.http.post('/contract/deleteContract',{
  745. id: this.contractForm.id
  746. },res => {
  747. if(res.code == 'ok'){
  748. this.addDialog = false
  749. this.getContractList()
  750. this.$message({
  751. type: 'success',
  752. message: this.$t('message.successfullyDeleted') + '!'
  753. });
  754. }else{
  755. this.$message({
  756. type: 'error',
  757. message: res.msg
  758. });
  759. }
  760. },err => {
  761. this.$message({
  762. type: 'error',
  763. message: err
  764. });
  765. })
  766. }).catch(() => {
  767. this.$message({
  768. type: 'info',
  769. message: this.$t('thedeletionhasbeencancelled')
  770. });
  771. });
  772. },
  773. processR(row,status){
  774. this.denyReasonDialog = true
  775. this.denyrowId = row.id
  776. this.denyReason = ''
  777. },
  778. process(row,status){
  779. let parameter
  780. if(status == 2){
  781. parameter = {
  782. id: this.denyrowId,
  783. status: status,
  784. msg: this.denyReason
  785. }
  786. }else{
  787. parameter = {
  788. id: row.id,
  789. status: status
  790. }
  791. }
  792. this.$confirm('确认审核通过吗,通过后合同基本信息无法修改', this.$t('other.prompts'), {
  793. confirmButtonText: this.$t('btn.determine'),
  794. cancelButtonText: this.$t('btn.cancel'),
  795. type: 'warning'
  796. }).then(() => {
  797. this.http.post('/contract/processContract',parameter,
  798. res => {
  799. if(res.code == 'ok'){
  800. this.getContractList()
  801. this.denyReasonDialog = false
  802. this.$message({
  803. message: status == 0 ? this.$t('state.alreadyPassed') : this.$t('state.rejected'),
  804. type: 'success'
  805. })
  806. }else{
  807. this.$message({
  808. message: res.msg,
  809. type: 'error'
  810. })
  811. }
  812. },err => {
  813. this.$message({
  814. message: err,
  815. type: 'error'
  816. })
  817. })
  818. });
  819. },
  820. lookover(row){
  821. console.log('lookover',row);
  822. if(this.user.userNameNeedTranslate == 1) {
  823. let obj = {name: '',text: ''}
  824. if (row.msg) {
  825. let match = row.msg.match(/\$userName=(.*?)\$(.*)/);
  826. if (match) {
  827. obj.name = match[1];
  828. obj.text = match[2];
  829. } else {
  830. obj.text = row.msg;
  831. }
  832. }
  833. // if(row.msg.indexOf('$userName=') != '-1') {
  834. // let str = row.msg.split('$userName=')[1]
  835. // let arr = str.split('$')
  836. // obj.name = arr[0]
  837. // obj.text = arr[1]
  838. // } else {
  839. // obj.text = row.msg
  840. // }
  841. row.msg = obj
  842. this.contractForm = row
  843. } else {
  844. this.contractForm = row
  845. }
  846. this.fileList = this.contractForm.files ? this.contractForm.files : []
  847. for(let i in this.fileList){
  848. this.fileList[i].name = this.fileList[i].documentName
  849. }
  850. this.lookoverDialog = true;
  851. this.getContractPaymentList();
  852. },
  853. submitInsert(){
  854. this.$refs.contractForm.validate(valid => {
  855. if (valid) {
  856. //校验回款日期和金额
  857. var totalPayment = 0.0;
  858. for (var i = 0; i < this.contractPaymentList.length; i++) {
  859. if (!this.contractPaymentList[i].payDate) {
  860. this.$message({
  861. message: '回款日期不能为空',
  862. type: 'error'
  863. })
  864. return;
  865. }
  866. if (!this.contractPaymentList[i].amount) {
  867. this.$message({
  868. message: '回款金额不能为0',
  869. type: 'error'
  870. })
  871. return;
  872. }
  873. totalPayment += parseFloat(this.contractPaymentList[i].amount);
  874. }
  875. if (totalPayment > parseFloat(this.contractForm.amounts)) {
  876. this.$message({
  877. message: '总回款金额不得大于合同金额',
  878. type: 'error'
  879. })
  880. return;
  881. }
  882. this.submitLoading = true
  883. delete this.contractForm.files
  884. this.contractForm.paymentListStr = JSON.stringify(this.contractPaymentList);
  885. this.http.post(this.dialogTitle == this.$t('add') ? '/contract/addContract' : '/contract/editContract',this.contractForm,
  886. res => {
  887. this.submitLoading = false
  888. this.addDialog = false
  889. if(res.code == 'ok'){
  890. this.$message({
  891. message: res.msg,
  892. type: 'success'
  893. })
  894. if(this.dialogTitle == this.$t('add')){
  895. this.contractForm.id = res.data
  896. }
  897. this.submitFile()
  898. }else{
  899. this.$message({
  900. message: res.msg,
  901. type: 'error'
  902. })
  903. }
  904. },err => {
  905. this.submitLoading = false
  906. this.addDialog = false
  907. this.$message({
  908. message: err,
  909. type: 'error'
  910. })
  911. })
  912. }
  913. })
  914. },
  915. fileChange(file,fileList){
  916. // console.log('fileChange',file,fileList);
  917. file.needUpload = true
  918. this.fileList.push(file)
  919. },
  920. fileDelete(row){
  921. // console.log(row,this.fileList);
  922. this.$confirm(this.$t('que-ding-yao-shan-chu-gai-wen-jian-ma'), this.$t('other.prompts'), {
  923. confirmButtonText: this.$t('btn.determine'),
  924. cancelButtonText: this.$t('btn.cancel'),
  925. type: 'warning'
  926. }).then(() => {
  927. if(row.uid){
  928. for(let i in this.fileList){
  929. if(this.fileList[i].uid && this.fileList[i].uid == row.uid){
  930. this.fileList.splice(i,1)
  931. }
  932. }
  933. }else{
  934. this.http.post('/contract-document/fileDelete',{
  935. contractId: this.contractForm.id,
  936. fileIds: [row.id]
  937. },res => {
  938. if(res.code == 'ok'){
  939. this.getContractList()
  940. this.fileList.filter(item => !item.id || item.id != row.id)
  941. this.$message({
  942. type: 'success',
  943. message: this.$t('message.successfullyDeleted') + '!'
  944. });
  945. }else{
  946. this.$message({
  947. type: 'error',
  948. message: res.msg
  949. });
  950. }
  951. },err => {
  952. this.$message({
  953. type: 'error',
  954. message: err
  955. });
  956. })
  957. }
  958. }).catch(() => {
  959. this.$message({
  960. type: 'info',
  961. message: this.$t('thedeletionhasbeencancelled')
  962. });
  963. });
  964. },
  965. fileDownload(row){
  966. this.http.downloadFile('/contract-document/fileDown',{
  967. contractId: this.contractForm.id,
  968. fileId: row.id
  969. },row.name,err=>{
  970. this.$message({
  971. message: err,
  972. type: 'error'
  973. })
  974. })
  975. },
  976. submitFile(){
  977. // console.log('submitFile',this.fileList);
  978. let formData = new FormData();
  979. for(let i in this.fileList){
  980. if(this.fileList[i].needUpload){
  981. formData.append("file", this.fileList[i].raw);
  982. }
  983. }
  984. formData.append("ContractId", this.contractForm.id);
  985. this.http.uploadFile('/contract-document/fileUpload',formData,
  986. res => {
  987. if(res.code == 'ok'){
  988. this.getContractList()
  989. }else{
  990. this.$message({
  991. message: res.msg,
  992. type: 'error'
  993. })
  994. }
  995. },err => {
  996. this.$message({
  997. message: err,
  998. type: 'error'
  999. })
  1000. })
  1001. },
  1002. getContractType(){
  1003. this.http.post('/contractType/getContractType',{},
  1004. res=>{
  1005. if(res.code=='ok'){
  1006. this.typeList = res.data
  1007. }else{
  1008. this.$message({
  1009. message: res.msg,
  1010. type: 'error'
  1011. })
  1012. }
  1013. },err=>{
  1014. this.$message({
  1015. message: err,
  1016. type: 'error'
  1017. })
  1018. })
  1019. },
  1020. getContractList(){
  1021. // pageIndex,pageSize,number,name,typeName,status,startDate,endDate
  1022. let parameter = {
  1023. pageIndex: this.page,
  1024. pageSize: this.size,
  1025. }
  1026. if(this.typeName){
  1027. parameter.typeName = this.typeName
  1028. }
  1029. if(this.keyword){
  1030. if(this.searchField){
  1031. parameter.number = this.keyword
  1032. }else{
  1033. parameter.name = this.keyword
  1034. }
  1035. }
  1036. if(this.status !== ''){
  1037. parameter.status = this.status
  1038. }
  1039. if(this.dateArray && this.dateArray.length == 2){
  1040. parameter.startDate = this.dateArray[0]
  1041. parameter.endDate = this.dateArray[1]
  1042. }
  1043. if(this.paymentDate && this.paymentDate.length == 2){
  1044. parameter.paymentStartDate = this.paymentDate[0]
  1045. parameter.paymentEndDate = this.paymentDate[1]
  1046. }
  1047. this.listLoading = true
  1048. this.http.post('/contract/getContractPage',parameter,
  1049. res => {
  1050. this.listLoading = false
  1051. if(res.code == 'ok'){
  1052. this.contractList = res.data.data
  1053. this.total = res.data.total
  1054. }else{
  1055. this.$message({
  1056. message: res.msg,
  1057. type: 'error'
  1058. })
  1059. }
  1060. },err => {
  1061. this.listLoading = false
  1062. this.$message({
  1063. message: err,
  1064. type: 'error'
  1065. })
  1066. })
  1067. }
  1068. },
  1069. }
  1070. </script>
  1071. <style>
  1072. .lookoverContract{
  1073. margin-top: 30px;
  1074. }
  1075. .lookoverContract .el-form-item{
  1076. width: 50%;
  1077. float: left;
  1078. }
  1079. .lookoverContract .el-form-item__label{
  1080. font-weight: 600;
  1081. }
  1082. .lookoverContract .contractFiles{
  1083. width: 100%;
  1084. }
  1085. .lookoverContract .contractFiles_title{
  1086. margin-left: 5%;
  1087. font-size: 16px;
  1088. line-height: 20px;
  1089. margin-top: 16px;
  1090. }
  1091. .contractForm{
  1092. margin-top: 30px;
  1093. }
  1094. .contractForm .el-form-item{
  1095. width: 90%;
  1096. }
  1097. .contractForm .contractFiles{
  1098. width: 100%;
  1099. }
  1100. .contractForm .contractFiles_title{
  1101. margin-left: 5%;
  1102. font-size: 16px;
  1103. line-height: 20px;
  1104. margin-top: 16px;
  1105. }
  1106. </style>