contract.vue 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333
  1. <!-- 采购合同管理 -->
  2. <template>
  3. <div class="contract">
  4. <template v-if="!detailVisible && !addOrUpdateVisible && !changeFormVisible &&!changeAttachVisible && !attachVisible && !noticeChangeAttachVisible">
  5. <el-form :inline="true" :model="dataForm" @keyup.enter.native="search()">
  6. <el-form-item label="名称" prop="supplierName">
  7. <el-input v-model="dataForm.supplierName" placeholder="客户名称" clearable/>
  8. </el-form-item>
  9. <el-form-item label="申请日期">
  10. <el-date-picker
  11. v-model="dataForm.date"
  12. value-format="yyyy-MM-dd"
  13. type="daterange"
  14. range-separator="至"
  15. start-placeholder="开始日期"
  16. end-placeholder="结束日期">
  17. </el-date-picker>
  18. </el-form-item>
  19. <el-form-item>
  20. <el-button @click="search()">查询</el-button>
  21. <el-button v-if="isAuth('pur:purchaseContract:save')" type="primary" @click="addOrUpdateHandle(0)">录入</el-button>
  22. <el-button v-if="isAuth('cus:contractBook:noteChangeConfig')" type="primary" @click="setNoticeChangeHandel()">变更通知人设置</el-button>
  23. </el-form-item>
  24. </el-form>
  25. <el-table
  26. :data="dataList"
  27. border
  28. v-loading="dataListLoading"
  29. style="width: 100%;">
  30. <el-table-column
  31. label="序号"
  32. type="index"
  33. width="50"
  34. align="center">
  35. </el-table-column>
  36. <el-table-column
  37. prop="contractCode"
  38. header-align="center"
  39. align="center"
  40. min-width="120"
  41. :show-tooltip-when-overflow="true"
  42. label="合同编码">
  43. </el-table-column>
  44. <el-table-column
  45. prop="customerName"
  46. header-align="center"
  47. align="center"
  48. min-width="140"
  49. :show-tooltip-when-overflow="true"
  50. label="客户名称">
  51. </el-table-column>
  52. <el-table-column
  53. prop="contractNumber"
  54. header-align="center"
  55. align="center"
  56. min-width="120"
  57. :show-tooltip-when-overflow="true"
  58. label="合同号">
  59. </el-table-column>
  60. <el-table-column
  61. prop="reCode"
  62. header-align="center"
  63. align="center"
  64. min-width="120"
  65. :show-tooltip-when-overflow="true"
  66. label="合同评审表编码">
  67. </el-table-column>
  68. <el-table-column
  69. prop="deliveryTime"
  70. header-align="center"
  71. align="center"
  72. min-width="140"
  73. :show-overflow-tooltip="true"
  74. label="合同交期">
  75. </el-table-column>
  76. <el-table-column
  77. prop="actualDeliveryTime"
  78. header-align="center"
  79. align="center"
  80. min-width="140"
  81. :show-overflow-tooltip="true"
  82. label="实际交期">
  83. </el-table-column>
  84. <el-table-column
  85. prop="totalAmount"
  86. header-align="center"
  87. align="center"
  88. min-width="100"
  89. label="合同总金额">
  90. </el-table-column>
  91. <el-table-column
  92. prop="isChange"
  93. header-align="center"
  94. align="center"
  95. label="是否进行合同更改">
  96. </el-table-column>
  97. <el-table-column
  98. prop="changeContentDesc"
  99. header-align="center"
  100. align="center"
  101. min-width="160"
  102. :show-tooltip-when-overflow="true"
  103. label="更改内容简述">
  104. </el-table-column>
  105. <el-table-column
  106. header-align="center"
  107. align="center"
  108. label="合同附件">
  109. <template slot-scope="scope">
  110. <el-button :disabled="!scope.row.attachList || scope.row.attachList.length === 0" type="text" size="small" @click="attachDetails(scope.row)">查看</el-button>
  111. </template>
  112. </el-table-column>
  113. <el-table-column
  114. header-align="center"
  115. align="center"
  116. label="合同更改通知单附件">
  117. <template slot-scope="scope">
  118. <el-button :disabled="!scope.row.noticeAttachList || scope.row.noticeAttachList.length === 0" type="text" size="small" @click="changeDetails(scope.row)">查看</el-button>
  119. </template>
  120. </el-table-column>
  121. <el-table-column
  122. prop="notes"
  123. header-align="center"
  124. align="center"
  125. min-width="180"
  126. :show-overflow-tooltip="true"
  127. label="备注">
  128. </el-table-column>
  129. <el-table-column
  130. fixed="right"
  131. header-align="center"
  132. align="center"
  133. width="150"
  134. label="操作">
  135. <template slot-scope="scope">
  136. <el-button v-if="isAuth('cus:contractBook:info')" type="text" size="small" @click="detailHandle(scope.row.contractId)">查看</el-button>
  137. <el-button v-if="isAuth('cus:contractBook:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.contractId, false)">编辑</el-button>
  138. <el-button v-if="isAuth('cus:contractBook:changeContract')" type="text" size="small" @click="changeHandle(scope.row.contractId)">变更</el-button>
  139. </template>
  140. </el-table-column>
  141. </el-table>
  142. <el-pagination
  143. @size-change="sizeChangeHandle"
  144. @current-change="currentChangeHandle"
  145. :current-page="pageIndex"
  146. :page-sizes="[10, 20, 50, 100]"
  147. :page-size="pageSize"
  148. :total="totalPage"
  149. layout="total, sizes, prev, pager, next, jumper">
  150. </el-pagination>
  151. </template>
  152. <!-- 弹窗, 新增 / 修改 -->
  153. <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList" @onChose="onChose"></add-or-update>
  154. <detail v-if="detailVisible" ref="detail" @onChose="onChose"/>
  155. <attach-detail v-if="changeAttachVisible" ref="changeDetail" @onChose="onChose"/>
  156. <attach-detail v-if="attachVisible" ref="attachDetail" @onChose="onChose"/>
  157. <notice-change-setting v-if="noticeChangeAttachVisible" ref="noticeChangeSetting" @onChose="onChose"/>
  158. <change-form v-if="changeFormVisible" ref="changeForm" @refreshDataList="getDataList" @onChose="onChose"/>
  159. </div>
  160. </template>
  161. <script>
  162. import AddOrUpdate from '../cus/contract-record-add-or-update'
  163. import Detail from '../cus/contract-record-detail'
  164. import { getCusContractBookList } from '@/api/cus'
  165. import AttachDetail from '../common/attach-detail'
  166. import NoticeChangeSetting from '../cus/contract-record-notice-change-setting'
  167. import ChangeForm from '../cus/contract-record-change'
  168. export default {
  169. name: 'contract',
  170. components: {
  171. AttachDetail,
  172. AddOrUpdate,
  173. Detail,
  174. NoticeChangeSetting,
  175. ChangeForm
  176. },
  177. data () {
  178. return {
  179. addOrUpdateVisible: false,
  180. detailVisible: false,
  181. attachVisible: false,
  182. changeAttachVisible: false,
  183. noticeChangeAttachVisible: false,
  184. changeFormVisible: false,
  185. dataForm: {},
  186. dataList: [],
  187. pageIndex: 1,
  188. pageSize: 10,
  189. totalPage: 0,
  190. dataListLoading: false,
  191. dataListSelections: []
  192. }
  193. },
  194. created () {
  195. this.getDataList()
  196. },
  197. methods: {
  198. onChose () {
  199. this.addOrUpdateVisible = false
  200. this.attachVisible = false
  201. this.detailVisible = false
  202. this.noticeChangeAttachVisible = false
  203. this.changeFormVisible = false
  204. this.changeAttachVisible = false
  205. },
  206. // 查询
  207. search () {
  208. this.pageIndex = 1
  209. this.getDataList()
  210. },
  211. // 获取数据列表
  212. getDataList () {
  213. this.dataListLoading = true
  214. let params = {
  215. 'current': this.pageIndex,
  216. 'size': this.pageSize,
  217. 'customerName': this.dataForm.customerName ? this.dataForm.customerName : null
  218. }
  219. getCusContractBookList(params).then(({data}) => {
  220. if (data && data.code === '200') {
  221. this.dataList = data.data.records
  222. this.totalPage = Number(data.data.total)
  223. } else {
  224. this.dataList = []
  225. this.totalPage = 0
  226. }
  227. this.dataListLoading = false
  228. })
  229. },
  230. deleteHandle (id) {
  231. if (!id) return
  232. let ids = []
  233. ids.push(id)
  234. this.$confirm(`确定删除?`, '提示', {
  235. confirmButtonText: '确定',
  236. cancelButtonText: '取消',
  237. type: 'warning'
  238. }).then(() => {
  239. this.$http({
  240. url: this.$http.adornUrl(`/biz-service/cusContractBook/delete`),
  241. method: 'DELETE',
  242. data: ids
  243. }).then(({data}) => {
  244. if (data && data.code === '200') {
  245. this.$message({
  246. message: '操作成功',
  247. type: 'success',
  248. duration: 1500,
  249. onClose: () => {
  250. this.getDataList()
  251. }
  252. })
  253. } else {
  254. this.$message.error(data.msg)
  255. }
  256. })
  257. }).catch(() => {})
  258. },
  259. // 每页数
  260. sizeChangeHandle (val) {
  261. this.pageSize = val
  262. this.pageIndex = 1
  263. this.getDataList()
  264. },
  265. // 当前页
  266. currentChangeHandle (val) {
  267. this.pageIndex = val
  268. this.getDataList()
  269. },
  270. // 多选
  271. selectionChangeHandle (val) {
  272. this.dataListSelections = val
  273. },
  274. // 新增 / 修改
  275. addOrUpdateHandle (id) {
  276. this.addOrUpdateVisible = true
  277. this.$nextTick(() => {
  278. this.$refs.addOrUpdate.init(id)
  279. })
  280. },
  281. // 变更
  282. changeHandle (id) {
  283. this.changeFormVisible = true
  284. this.$nextTick(() => {
  285. this.$refs.changeForm.init(id)
  286. })
  287. },
  288. // 转换属性“产品类别”
  289. typeFormat (row) {
  290. if (this.optionsType) {
  291. for (let i = 0; i < this.optionsType.length; i++) {
  292. if (this.optionsType[i].code === row.productType) {
  293. return this.optionsType[i].value
  294. }
  295. }
  296. }
  297. },
  298. // 详情
  299. detailHandle (id) {
  300. this.detailVisible = true
  301. this.$nextTick(() => {
  302. this.$refs.detail.init(id)
  303. })
  304. },
  305. // 变更通知人设置
  306. setNoticeChangeHandel () {
  307. this.noticeChangeAttachVisible = true
  308. this.$nextTick(() => {
  309. this.$refs.noticeChangeSetting.init()
  310. })
  311. },
  312. // 产品更改通知单
  313. changeDetails (row) {
  314. this.changeAttachVisible = true
  315. this.$nextTick(() => {
  316. this.$refs.changeDetail.init(row.noticeAttachList)
  317. })
  318. },
  319. // 附件
  320. attachDetails (row) {
  321. this.attachVisible = true
  322. this.$nextTick(() => {
  323. this.$refs.attachDetail.init(row.attachList)
  324. })
  325. }
  326. }
  327. }
  328. </script>
  329. <style scoped>
  330. </style>