guaranteeDialog.vue 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187
  1. <!--
  2. guarantee 保单选择
  3. -->
  4. <!--
  5. guarantee 供应合同选择
  6. -->
  7. <template>
  8. <el-dialog title="选择保单" :visible.sync="dialog.guarantee" width="600px">
  9. <el-tabs type="border-card">
  10. <el-tab-pane>
  11. <span slot="label">选择保单</span>
  12. <div id="firm">
  13. <el-radio-group v-model="radio" style="width:100%;">
  14. <el-table :data="tableData" style="width: 100%" height="300px">
  15. <el-table-column label="保单号">
  16. <template slot-scope="scope">
  17. <el-radio v-model="radio" :label="scope.row">{{scope.row.insuranceNo}}</el-radio>
  18. </template>
  19. </el-table-column>
  20. <el-table-column label="下载">
  21. <template slot-scope="scope">
  22. <el-button type="text">下载</el-button>
  23. </template>
  24. </el-table-column>
  25. </el-table>
  26. </el-radio-group>
  27. <my-pagination :page="page" style="margin-top:10px;"></my-pagination>
  28. <p style="height:40px;line-height:40px;text-align:center;color:#9E9E9E;">
  29. 保单信息有错误? 赶快去
  30. <i style="color:#46B0FF;cursor: pointer;">厂家库</i>维护吧
  31. </p>
  32. <div class="footer">
  33. <el-button
  34. type="primary"
  35. @click="getSelect"
  36. style="display:block;margin: 10px auto 0;"
  37. >确 定</el-button>
  38. </div>
  39. </div>
  40. </el-tab-pane>
  41. <el-tab-pane>
  42. <span slot="label">新建保单</span>
  43. <el-form label-width="80px" :rules="rules" :model="formData" ref="ruleForm">
  44. <el-form-item label="保单号:" prop="name">
  45. <el-input v-model="formData.name"></el-input>
  46. </el-form-item>
  47. <el-form-item label="保险文件">
  48. <upload-files @change="changeFiles" ref="files" :keysArr="keysArr" :max="max"></upload-files>
  49. </el-form-item>
  50. <el-form-item>
  51. <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
  52. <el-button @click="resetForm('ruleForm')">重置</el-button>
  53. </el-form-item>
  54. </el-form>
  55. </el-tab-pane>
  56. </el-tabs>
  57. </el-dialog>
  58. </template>
  59. <script>
  60. import myPagination from "@/components/lib/myPagination";
  61. import uploadFiles from '@/components/lib/uploadFiles'
  62. import { getListForGuarantee, createGuarantee } from "@/api/request"
  63. import tools from "@/assets/js/tools"
  64. export default {
  65. components: {
  66. myPagination,
  67. uploadFiles
  68. },
  69. props: {
  70. dialog: {
  71. type: Object,
  72. default: function () {
  73. return {
  74. guarantee: true
  75. };
  76. }
  77. },
  78. id: {
  79. type: [Number, String],
  80. default: 0
  81. }
  82. },
  83. data() {
  84. return {
  85. search: "", //搜索文案
  86. radio: "",
  87. formData: {
  88. name: ""
  89. },
  90. rules: {
  91. name: { required: true, message: '请输入保单号', trigger: 'blur' },
  92. },
  93. tableData: [],
  94. page: {
  95. size: 10,
  96. sizes: [10, 30, 50, 100, 150, 200],
  97. total: 400,
  98. currentPage: 1
  99. },
  100. keysArr: [],
  101. max: 1,
  102. allData: []
  103. };
  104. },
  105. created() { },
  106. mounted() { },
  107. methods: {
  108. submitForm(formName) {
  109. this.$refs[formName].validate((valid) => {
  110. if (valid) {
  111. this.createGree()
  112. } else {
  113. return false;
  114. }
  115. });
  116. },
  117. changeFiles(val) {
  118. this.keysArr = val
  119. },
  120. resetForm() {
  121. this.$refs.ruleForm.resetFields();
  122. },
  123. //新建保单
  124. createGree() {
  125. let param = {
  126. data: {
  127. venderId: this.id,
  128. insuranceNo: this.formData.name,
  129. projectId: this.$route.query.projId,
  130. contractFile: this.keysArr[0]
  131. }
  132. }
  133. let _this = this
  134. createGuarantee(param, res => {
  135. _this.$emit("change", param.data)
  136. _this.dialog.guarantee = false
  137. })
  138. },
  139. getList() {
  140. this.radio = ""
  141. let _this = this
  142. this.page = {
  143. size: 10,
  144. sizes: [10, 30, 50, 100, 150, 200],
  145. total: 0,
  146. currentPage: 1
  147. }
  148. if (!!this.id) {
  149. let param = {
  150. data: {
  151. projectId: this.$route.query.projId,
  152. venderId: this.id
  153. }
  154. }
  155. getListForGuarantee(param, res => {
  156. _this.$refs.ruleForm.resetFields()
  157. _this.$refs.files.resetFile()
  158. _this.allData = res.content || []
  159. _this.page.total = _this.allData.length
  160. // //分页
  161. _this.pageChange()
  162. })
  163. }
  164. },
  165. getSelect() {
  166. this.$emit("change", this.radio)
  167. this.dialog.guarantee = false
  168. },
  169. pageChange() {
  170. this.tableData = tools.pagination(this.page.currentPage, this.page.size, this.allData)
  171. }
  172. },
  173. watch: {
  174. dialog: {
  175. deep: true,
  176. handler: function (val) {
  177. if (this.dialog.guarantee) {
  178. this.getList()
  179. }
  180. }
  181. }
  182. }
  183. };
  184. </script>