milestone.vue 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162
  1. <template>
  2. <HcCard actionUi="text-center">
  3. <template #extra>
  4. <div v-if="infoData.length===0">
  5. <el-button size="small" type="primary" :disabled="isDisabled" @click="addRow">
  6. <HcIcon name="add"/>
  7. <span>新增</span>
  8. </el-button>
  9. </div>
  10. </template>
  11. <HcTable :column="tableColumn" :datas="infoData">
  12. <template #returnedCondition="{row,index}">
  13. <span v-if="isDisabled">{{row.returnedCondition}}</span>
  14. <el-input v-model="row.returnedCondition" v-else />
  15. </template>
  16. <template #shouldReturnedTime="{row,index}">
  17. <span v-if="isDisabled">{{row.shouldReturnedTime}}</span>
  18. <el-date-picker class="block" v-model="row.shouldReturnedTime" format="YYYY-MM-DD" type="date" value-format="YYYY-MM-DD" v-else/>
  19. </template>
  20. <template #shouldReturnedMoney="{row,index}">
  21. <span v-if="isDisabled">{{row.shouldReturnedMoney}}</span>
  22. <el-input v-model="row.shouldReturnedMoney" v-else/>
  23. </template>
  24. <template #practicalReturnedTime="{row,index}">
  25. <span v-if="isDisabled">{{row.practicalReturnedTime}}</span>
  26. <el-date-picker class="block" v-model="row.practicalReturnedTime" format="YYYY-MM-DD" type="date" value-format="YYYY-MM-DD" v-else disabled/>
  27. </template>
  28. <template #practicalReturnedMoney="{row,index}">
  29. <span v-if="isDisabled">{{row.practicalReturnedMoney}}</span>
  30. <el-input v-model="row.practicalReturnedMoney" v-else disabled/>
  31. </template>
  32. <template #reminderUser="{row,index}">
  33. <span v-if="isDisabled">{{row.reminderUserName}}</span>
  34. <el-select v-model="row.reminderUser" block placeholder="请选择" v-else>
  35. <el-option v-for="item in reminderUserList" :label="item.name" :value="item.id"/>
  36. </el-select>
  37. </template>
  38. <template #action="{row,index}">
  39. <el-button size="small" type="primary" :disabled="isDisabled" @click="addRow">
  40. <HcIcon name="add"/>
  41. <span>新增</span>
  42. </el-button>
  43. <el-button size="small" type="danger" :disabled="isDisabled" @click="delRow(index)">
  44. <HcIcon name="delete-bin"/>
  45. <span>删除</span>
  46. </el-button>
  47. </template>
  48. </HcTable>
  49. <template #action>
  50. <el-button size="large" type="info" hc-btn @click="goBackClick">
  51. <HcIcon name="arrow-go-back"/>
  52. <span v-if="isDisabled">返回上一级</span>
  53. <span v-else>取消并返回</span>
  54. </el-button>
  55. <el-button size="large" type="primary" hc-btn @click="saveClick" v-if="!isDisabled" :loading="saveLoaingVal">
  56. <HcIcon name="check-double"/>
  57. <span>提交保存</span>
  58. </el-button>
  59. </template>
  60. </HcCard>
  61. </template>
  62. <script setup>
  63. import {ref, watch} from "vue";
  64. import {useRouter} from 'vue-router'
  65. const router = useRouter()
  66. const emit= defineEmits(['saveClick',"update:datas"])
  67. //参数
  68. const props = defineProps({
  69. datas: {
  70. type: Array,
  71. default: () => ([])
  72. },
  73. disabled: {
  74. type: Boolean,
  75. default: false
  76. },
  77. saveLoaing:{
  78. type: Boolean,
  79. default: false
  80. },
  81. reminderUserList:{
  82. type:Array,
  83. default:()=>([])
  84. },
  85. })
  86. const infoData = ref(props.datas)
  87. const isDisabled = ref(props.disabled)
  88. const saveLoaingVal=ref(props.saveLoaing)
  89. //深度监听
  90. watch(() => [
  91. props.datas,
  92. infoData,
  93. ], ([datas,infoData]) => {
  94. console.log(datas,'datas');
  95. infoData.value = datas
  96. emit('update:datas', infoData)
  97. }, {deep: true})
  98. //监听
  99. watch(() => [
  100. props.disabled,
  101. props.saveLoaing,
  102. ], ([disabled,saveLoaing]) => {
  103. isDisabled.value = disabled
  104. saveLoaingVal.value=saveLoaing
  105. })
  106. //成本测算表格
  107. const tableColumn = [
  108. {key: 'returnedCondition', name: '回款条件', align: 'center'},
  109. {key: 'shouldReturnedTime', name: '应收款时间', align: 'center'},
  110. {key: 'shouldReturnedMoney', name: '应收回款金额', align: 'center'},
  111. {key: 'practicalReturnedTime', name: '实际回款时间', align: 'center'},
  112. {key: 'practicalReturnedMoney', name: '实际回款金额', align: 'center'},
  113. {key: 'reminderUser', name: '催款执行人', align: 'center'},
  114. {key: 'action', name: '操作', width: '180', align: 'center'},
  115. ]
  116. const tableData = ref([
  117. {id: 1}, {id: 2}, {id: 3}, {id: 4},
  118. ])
  119. //返回
  120. const goBackClick = () => {
  121. router.back()
  122. }
  123. const addRow=()=>{
  124. infoData.value.push({})
  125. }
  126. const delRow=(index)=>{
  127. infoData.value.splice(index, 1)
  128. }
  129. //提交保存
  130. const saveClick = () => {
  131. console.log(infoData.value,'infoData');
  132. emit('saveClick')
  133. }
  134. </script>
  135. <style scoped lang="scss">
  136. @import "~src/styles/project/contract/form.scoped.scss";
  137. </style>