123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162 |
- <template>
- <HcCard actionUi="text-center">
- <template #extra>
- <div v-if="infoData.length===0">
- <el-button size="small" type="primary" :disabled="isDisabled" @click="addRow">
- <HcIcon name="add"/>
- <span>新增</span>
- </el-button>
- </div>
-
- </template>
- <HcTable :column="tableColumn" :datas="infoData">
- <template #returnedCondition="{row,index}">
- <span v-if="isDisabled">{{row.returnedCondition}}</span>
- <el-input v-model="row.returnedCondition" v-else />
- </template>
- <template #shouldReturnedTime="{row,index}">
- <span v-if="isDisabled">{{row.shouldReturnedTime}}</span>
- <el-date-picker class="block" v-model="row.shouldReturnedTime" format="YYYY-MM-DD" type="date" value-format="YYYY-MM-DD" v-else/>
- </template>
- <template #shouldReturnedMoney="{row,index}">
- <span v-if="isDisabled">{{row.shouldReturnedMoney}}</span>
- <el-input v-model="row.shouldReturnedMoney" v-else/>
- </template>
- <template #practicalReturnedTime="{row,index}">
- <span v-if="isDisabled">{{row.practicalReturnedTime}}</span>
- <el-date-picker class="block" v-model="row.practicalReturnedTime" format="YYYY-MM-DD" type="date" value-format="YYYY-MM-DD" v-else disabled/>
- </template>
- <template #practicalReturnedMoney="{row,index}">
- <span v-if="isDisabled">{{row.practicalReturnedMoney}}</span>
- <el-input v-model="row.practicalReturnedMoney" v-else disabled/>
- </template>
- <template #reminderUser="{row,index}">
- <span v-if="isDisabled">{{row.reminderUserName}}</span>
- <el-select v-model="row.reminderUser" block placeholder="请选择" v-else>
- <el-option v-for="item in reminderUserList" :label="item.name" :value="item.id"/>
- </el-select>
- </template>
- <template #action="{row,index}">
- <el-button size="small" type="primary" :disabled="isDisabled" @click="addRow">
- <HcIcon name="add"/>
- <span>新增</span>
- </el-button>
- <el-button size="small" type="danger" :disabled="isDisabled" @click="delRow(index)">
- <HcIcon name="delete-bin"/>
- <span>删除</span>
- </el-button>
- </template>
- </HcTable>
- <template #action>
- <el-button size="large" type="info" hc-btn @click="goBackClick">
- <HcIcon name="arrow-go-back"/>
- <span v-if="isDisabled">返回上一级</span>
- <span v-else>取消并返回</span>
- </el-button>
- <el-button size="large" type="primary" hc-btn @click="saveClick" v-if="!isDisabled" :loading="saveLoaingVal">
- <HcIcon name="check-double"/>
- <span>提交保存</span>
- </el-button>
- </template>
- </HcCard>
- </template>
- <script setup>
- import {ref, watch} from "vue";
- import {useRouter} from 'vue-router'
- const router = useRouter()
- const emit= defineEmits(['saveClick',"update:datas"])
- //参数
- const props = defineProps({
- datas: {
- type: Array,
- default: () => ([])
- },
- disabled: {
- type: Boolean,
- default: false
- },
- saveLoaing:{
- type: Boolean,
- default: false
- },
- reminderUserList:{
- type:Array,
- default:()=>([])
- },
- })
- const infoData = ref(props.datas)
- const isDisabled = ref(props.disabled)
- const saveLoaingVal=ref(props.saveLoaing)
- //深度监听
- watch(() => [
- props.datas,
- infoData,
- ], ([datas,infoData]) => {
- console.log(datas,'datas');
- infoData.value = datas
- emit('update:datas', infoData)
- }, {deep: true})
- //监听
- watch(() => [
- props.disabled,
- props.saveLoaing,
- ], ([disabled,saveLoaing]) => {
- isDisabled.value = disabled
- saveLoaingVal.value=saveLoaing
- })
- //成本测算表格
- const tableColumn = [
- {key: 'returnedCondition', name: '回款条件', align: 'center'},
- {key: 'shouldReturnedTime', name: '应收款时间', align: 'center'},
- {key: 'shouldReturnedMoney', name: '应收回款金额', align: 'center'},
- {key: 'practicalReturnedTime', name: '实际回款时间', align: 'center'},
- {key: 'practicalReturnedMoney', name: '实际回款金额', align: 'center'},
- {key: 'reminderUser', name: '催款执行人', align: 'center'},
- {key: 'action', name: '操作', width: '180', align: 'center'},
- ]
- const tableData = ref([
- {id: 1}, {id: 2}, {id: 3}, {id: 4},
- ])
- //返回
- const goBackClick = () => {
- router.back()
- }
- const addRow=()=>{
- infoData.value.push({})
- }
- const delRow=(index)=>{
- infoData.value.splice(index, 1)
-
- }
- //提交保存
- const saveClick = () => {
- console.log(infoData.value,'infoData');
-
- emit('saveClick')
-
-
-
- }
- </script>
- <style scoped lang="scss">
- @import "~src/styles/project/contract/form.scoped.scss";
- </style>
|