book.vue 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319
  1. <template>
  2. <hc-new-card title="材料预付款报表手册">
  3. <template #extra>
  4. <hc-tooltip keys="debit_pay_material_book_recalculate_btn">
  5. <el-button :disabled="tableCheckedKeys.length <= 0" hc-btn type="warning" :loading="recalculateLoading" @click="recalculateClick">重新计算</el-button>
  6. </hc-tooltip>
  7. <el-button hc-btn type="primary" @click="addModalClick">
  8. <HcIcon name="add" />
  9. <span>新增</span>
  10. </el-button>
  11. </template>
  12. <hc-table
  13. :column="tableColumn" :datas="tableData" :loading="tableLoading" is-new :index-style="{ width: 60 }"
  14. is-check :check-style="{ width: 29 }" @selection-change="tableSelectionChange"
  15. >
  16. <template #action="{ row }">
  17. <el-link type="primary" :disabled="!row.rawUrl" @click="rowViewRawPdf(row)">查看电签报表</el-link>
  18. <el-link type="primary" @click="viewPdf(row)">查看报表</el-link>
  19. <el-link type="primary" :disabled="row.approveStatus === 0" @click="eVisaRowClick(row)">查看电签流程</el-link>
  20. <el-link type="success" @click="editRow(row)">修改</el-link>
  21. <el-link type="danger" :disabled="row.approveStatus === 2" @click="delCilck(row)">删除</el-link>
  22. <el-link v-loading="row?.recalculateLoading" :disabled="row.approveStatus !== 0" @click="recalculate(row)">重新计算</el-link>
  23. </template>
  24. </hc-table>
  25. <template #action>
  26. <hc-pages :pages="searchForm" @change="pageChange" />
  27. </template>
  28. <!-- 新增/修改 -->
  29. <hc-new-dialog v-model="formModalShow" is-to-body widths="30rem" :title="modalTitle" :loading="saveLoading" @save="formModalSave" @close="formModalClose">
  30. <el-form ref="formRef" class="p-4" :model="formModel" :rules="formRules" label-position="top">
  31. <el-form-item label="计量期:" prop="meterPeriodId">
  32. <el-select v-if="editType === 'add'" v-model="formModel.meterPeriodId" placeholder="选择计量期" filterable clearable block @change="selectPeriod">
  33. <el-option v-for="item in periodData" :key="item.id" :label="item.periodName" :value="item.id" />
  34. </el-select>
  35. <el-select v-if="editType === 'edit'" v-model="formModel.meterPeriodId" placeholder="选择计量期" disabled filterable clearable block @change="selectPeriod">
  36. <el-option v-for="item in key1Data" :key="item.id" :label="item.periodName" :value="item.id" />
  37. </el-select>
  38. </el-form-item>
  39. <el-form-item label="报表名称:" prop="statementName">
  40. <el-input v-model="formModel.statementName" />
  41. </el-form-item>
  42. <el-form-item label="报表期:">
  43. <el-input v-model="formModel.statementPeriod" disabled />
  44. </el-form-item>
  45. <el-form-item label="打印日期:">
  46. <el-date-picker v-model="formModel.printDate" class="block" format="YYYY-MM-DD" type="date" value-format="YYYY-MM-DD" />
  47. </el-form-item>
  48. <el-form-item label="请款理由:">
  49. <el-input v-model="formModel.repaymentCause" :autosize="{ minRows: 3, maxRows: 6 }" type="textarea" />
  50. </el-form-item>
  51. </el-form>
  52. </hc-new-dialog>
  53. <!-- 任务流程 -->
  54. <HcTaskModal v-model="isTaskModal" :ids="taskDataId" @close="taskDataId = ''" />
  55. </hc-new-card>
  56. </template>
  57. <script setup>
  58. import { onActivated, ref } from 'vue'
  59. import bookApi from '~api/debit-pay/material/book.js'
  60. import periodApi from '~api/debit-pay/material/periods.js'
  61. import { useAppStore } from '~src/store'
  62. import { formValidate, getArrValue, isNullES } from 'js-fast-way'
  63. import { toPdfPage } from '~uti/btn-auth'
  64. const useAppState = useAppStore()
  65. const contractId = ref(useAppState.getContractId)
  66. const projectId = ref(useAppState.getProjectId)
  67. import HcTaskModal from '~src/components/task-modal/task-modal.vue'
  68. import { HcDelMsg } from 'hc-vue3-ui'
  69. defineOptions({
  70. name: 'DebitPayMaterialBook',
  71. })
  72. //渲染完成
  73. onActivated(() => {
  74. getTableData()
  75. getPeriodData()
  76. getKey1Data()
  77. })
  78. //计量期
  79. const periodData = ref([])
  80. //未被引用的
  81. const getPeriodData = async ()=>{
  82. const { error, code, data } = await periodApi.conditionPeriod({
  83. contractId:contractId.value,
  84. type:1,
  85. })
  86. tableLoading.value = false
  87. if (!error && code === 200) {
  88. periodData.value = getArrValue(data)
  89. } else {
  90. periodData.value = []
  91. }
  92. }
  93. //所有计量期
  94. const key1Data = ref([])
  95. const getKey1Data = async ()=>{
  96. const { error, code, data } = await periodApi.allPeriod({
  97. contractId:contractId.value,
  98. type:1,
  99. })
  100. tableLoading.value = false
  101. if (!error && code === 200) {
  102. key1Data.value = getArrValue(data)
  103. } else {
  104. key1Data.value = []
  105. }
  106. }
  107. const selectPeriod = (val)=>{
  108. periodData.value.forEach((ele)=>{
  109. if (ele.id === val) {
  110. formModel.value.statementPeriod = ele.periodName
  111. formModel.value.printDate = ele.formPrintDate
  112. formModel.value.periodNumber = ele.periodNumber
  113. }
  114. })
  115. }
  116. //搜索表单
  117. const searchForm = ref({
  118. current: 1, size: 20, total: 0,
  119. })
  120. //分页
  121. const pageChange = ({ current, size }) => {
  122. searchForm.value.current = current
  123. searchForm.value.size = size
  124. getTableData()
  125. }
  126. //表格数据
  127. const tableLoading = ref(false)
  128. const tableColumn = ref([
  129. { key: 'periodNumber', name: '计量期' },
  130. { key: 'statementName', name: '报表名称' },
  131. { key: 'printDate', name: '打印日期' },
  132. { key: 'calculateDate', name: '重新计算时间' },
  133. { key: 'action', name: '操作', width: 400, align: 'center' },
  134. ])
  135. const tableData = ref([])
  136. const getTableData = async () => {
  137. tableLoading.value = true
  138. const { error, code, data } = await bookApi.getPage({
  139. ...searchForm.value,
  140. contractId:contractId.value,
  141. type:1,
  142. // meterPeriodId:searchForm.value.key1,
  143. })
  144. tableLoading.value = false
  145. if (!error && code === 200) {
  146. tableData.value = getArrValue(data['records'])
  147. searchForm.value.total = data['total']
  148. } else {
  149. tableData.value = []
  150. searchForm.value.total = 0
  151. }
  152. }
  153. //新增
  154. const formModalShow = ref(false)
  155. const editType = ref('')
  156. const modalTitle = ref('材料预付款报表新增')
  157. const addModalClick = () => {
  158. formModalShow.value = true
  159. formModel.value = {}
  160. editType.value = 'add'
  161. modalTitle.value = '材料预付款报表新增'
  162. }
  163. const editRow = (row)=>{
  164. formModalShow.value = true
  165. console.log(row, 'row')
  166. formModel.value = row
  167. editType.value = 'edit'
  168. modalTitle.value = '材料预付款报表修改'
  169. }
  170. const delCilck = (row)=>{
  171. HcDelMsg( async ( resolve) => {
  172. await removeProPay(row.id)
  173. resolve() //关闭弹窗的回调
  174. })
  175. }
  176. //查看报表
  177. const viewPdf = (row)=>{
  178. toPdfPage(row.rawUrl)
  179. }
  180. //多选
  181. const tableCheckedKeys = ref([])
  182. const tableSelectionChange = (rows) => {
  183. tableCheckedKeys.value = rows
  184. }
  185. //重新计算
  186. const recalculateLoading = ref(false)
  187. const recalculateClick = async () => {
  188. const rows = tableCheckedKeys.value
  189. if (rows.length <= 0) {
  190. window.$message.warning('请先勾选一条数据')
  191. return
  192. }
  193. if (rows.length > 1) {
  194. window.$message.warning('目前仅支持选择一条数据')
  195. return
  196. }
  197. recalculateLoading.value = true
  198. const isRes = await postRecalculateApi(rows[0])
  199. recalculateLoading.value = false
  200. if (isRes) {
  201. getTableData().then()
  202. }
  203. }
  204. //重新计算
  205. const recalculate = async (row)=>{
  206. row.recalculateLoading = true
  207. const isRes = await postRecalculateApi(row)
  208. row.recalculateLoading = false
  209. if (isRes) {
  210. getTableData().then()
  211. }
  212. }
  213. //发起重新计算请求
  214. const postRecalculateApi = async ({ id }) => {
  215. const { error, code, msg } = await bookApi.meterPdfInfo({
  216. reportId: id,
  217. type: 1,
  218. taskType: 2,
  219. })
  220. if (!error && code === 200) {
  221. window.$message.success('计算成功')
  222. return true
  223. } else {
  224. window.$message.error(msg ?? '操作失败')
  225. return false
  226. }
  227. }
  228. const removeProPay = async (id) => {
  229. const { error, code, msg } = await bookApi.remove({
  230. ids: id,
  231. })
  232. if (!error && code === 200) {
  233. window?.$message?.success('删除成功')
  234. getTableData()
  235. } else {
  236. window.$message.error(msg ?? '操作失败')
  237. }
  238. }
  239. //表单
  240. const formRef = ref(null)
  241. const formModel = ref({})
  242. const formRules = {
  243. meterPeriodId: {
  244. required: true,
  245. trigger: 'blur',
  246. message: '请选择计量期',
  247. },
  248. statementName: {
  249. required: true,
  250. trigger: 'blur',
  251. message: '请输入报表名称',
  252. },
  253. }
  254. const saveLoading = ref(false)
  255. const formModalSave = async () => {
  256. const isValidate = await formValidate(formRef.value)
  257. if (!isValidate) return false
  258. saveLoading.value = true
  259. const { error, code, msg } = await bookApi.submit({
  260. ...formModel.value,
  261. contractId:contractId.value,
  262. projectId:projectId.value,
  263. type:1,
  264. })
  265. //判断状态
  266. saveLoading.value = false
  267. if (!error && code === 200) {
  268. window?.$message?.success(msg)
  269. } else {
  270. window.$message.error(msg ?? '操作失败')
  271. }
  272. formModalClose()
  273. }
  274. const formModalClose = () => {
  275. formModalShow.value = false
  276. getTableData()
  277. }
  278. const rowViewRawPdf = (row)=>{
  279. toPdfPage(row?.rawUrl)
  280. }
  281. //查看电签流程
  282. const isTaskModal = ref(false)
  283. const taskDataId = ref('')
  284. const eVisaRowClick = ({ taskId }) => {
  285. if (isNullES(taskId)) {
  286. window.$message.warning('暂无电签数据')
  287. return
  288. }
  289. taskDataId.value = taskId
  290. setTimeout(()=> {
  291. isTaskModal.value = true
  292. }, 200)
  293. }
  294. </script>
  295. <style scoped lang="scss">
  296. </style>