selectContract.vue 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111
  1. <template>
  2. <div class="hui-flex-box hui-flex hui-table">
  3. <div class="hui-content-insert">
  4. <el-button type="primary" size="small" @click="upload()">上传合同</el-button>
  5. <contract-upload ref="upload" v-show="false" :contractId="contractId" type="project" @reload="init">
  6. </contract-upload>
  7. </div>
  8. <div class="hui-flex-box">
  9. <el-table ref="elTable" :data="tableData" height="100%" v-loading="loading"
  10. @current-change="handleCurrentChange">
  11. <el-table-column width="35" v-if="type === 'filter'">
  12. <template slot-scope="scope">
  13. <el-radio class="radio" :label="scope.row" v-model="currentRow">{{""}}</el-radio>
  14. </template>
  15. </el-table-column>
  16. <el-table-column prop="name" label="合同名称">
  17. </el-table-column>
  18. <el-table-column prop="createDate" label="创建时间">
  19. </el-table-column>
  20. <el-table-column prop="updateDate" label="更新时间">
  21. </el-table-column>
  22. <el-table-column label="操作" width="180" align="center">
  23. <template slot-scope="scope">
  24. <div class="hui-table-operation">
  25. <span class="table-operation" @click="previewItem(scope.row)">预览</span>
  26. <span class="table-operation" @click="upload(scope.row.id)">更新</span>
  27. <span class="table-operation" @click="deleteItem(scope.row.id)">删除</span>
  28. </div>
  29. </template>
  30. </el-table-column>
  31. <template slot="empty">
  32. <el-empty description="暂无数据"></el-empty>
  33. </template>
  34. </el-table>
  35. </div>
  36. <el-dialog :close-on-click-modal="false" title="预览合同" :visible.sync="dialogVisible" width="900px"
  37. :append-to-body="true">
  38. <pdf-viewer v-if="dialogVisible" :list="contractList" type="preview">
  39. </pdf-viewer>
  40. </el-dialog>
  41. </div>
  42. </template>
  43. <script>
  44. import {
  45. getOrganizationContract,
  46. deleteOrganizationContract
  47. } from '@/api/finace'
  48. const contractUpload = () => import('@/components/work/finace/contract/contractUpload');
  49. const pdfViewer = () => import('@/components/common/pdfViewer');
  50. import config from '@/config';
  51. export default {
  52. props: ['type'],
  53. data() {
  54. return {
  55. tableData: [],
  56. loading: false,
  57. contractList: [],
  58. contractId: '',
  59. dialogVisible: false,
  60. currentRow: null
  61. }
  62. },
  63. mounted() {
  64. this.init();
  65. },
  66. methods: {
  67. init(type) {
  68. this.loading = true;
  69. getOrganizationContract(this.$store.getters.organization.id).then(res => {
  70. this.loading = false;
  71. if (res.state) {
  72. this.tableData = res.data;
  73. if (this.type === 'filter') this.currentRow = this.tableData[0];
  74. }
  75. })
  76. },
  77. handleCurrentChange(row) {
  78. this.currentRow = row;
  79. },
  80. upload(id) {
  81. this.contractId = id;
  82. this.$nextTick(() => {
  83. this.$refs.upload.reloadUpload();
  84. })
  85. },
  86. previewItem(item) {
  87. this.contractList = [{
  88. url: window.location.origin + '/' + config.baseURL + '/file/workarkContract/pdf/' + item.id
  89. }]
  90. this.dialogVisible = true;
  91. },
  92. deleteItem(id) {
  93. this.$confirm('确定要删除合同?', () => {
  94. deleteOrganizationContract(id).then(res => {
  95. if (res.state) {
  96. this.$message.success('操作成功');
  97. this.init();
  98. }
  99. })
  100. });
  101. }
  102. },
  103. components: {
  104. contractUpload,
  105. pdfViewer
  106. }
  107. }
  108. </script>
  109. <style lang="scss"></style>