hac/src/views/project/contract/components/base.vue

<template>
    <HcCard actionUi="text-center">
        <div class="hc-project-contract-form-base" :class="isDisabled ? 'hc-card-form-center' : ''">
            <div class="base-form-box">
                <el-scrollbar>
                    <el-form ref="formBaseRef"
                             :model="formBaseModel"
                             :rules="formBaseRules"
                             :disabled="isDisabled"
                             label-position="left"
                             label-width="auto"
                             size="large"
                    >
                        <el-form-item label="合同编号：">
                            <el-input v-model="formBaseModel.number"/>
                        </el-form-item>
                        <el-form-item label="合同名称：" prop="name">
                            <el-input v-model="formBaseModel.name"/>
                        </el-form-item>
                  
                        <el-form-item label="合同类型：" prop="contractType">
                                    <el-select v-model="formBaseModel.contractType" block clearable placeholder="合同类型：">
                                        <el-option v-for="item in contractTypeval" :label="item.dictName" :value="item.dictValue"/>
                                    </el-select>
                        </el-form-item>
                        <el-form-item label="合同金额：" prop="contractMoney">
                            <el-input v-model="formBaseModel.contractMoney"/>
                        </el-form-item>
                        <el-form-item label="所属项目：" prop="projectId" block clearable placeholder="所属项目：">
                            <el-select block v-model="formBaseModel.projectId">
                                <el-option v-for="item in projectListval" :label="item.name" :value="item.id"/>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="签订时间：" prop="contractSignTime">
                            <el-date-picker class="block" v-model="formBaseModel.contractSignTime" format="YYYY-MM-DD" type="date" value-format="YYYY-MM-DD"  />
                        </el-form-item>
                        <el-form-item label="合同起止日期："  >
                            <HcDatePicker :dates="betweenTime" clearable  @change="betweenTimeUpdate"  :disabled="isDisabled"/>
                        </el-form-item>
                        <el-form-item label="对方单位回款联系人名称：">
                            <el-input v-model="formBaseModel.returnedUserName"/>
                        </el-form-item>
                        <el-form-item label="对方单位回款联系人电话：">
                            <el-input v-model="formBaseModel.returnedUserPhone"/>
                        </el-form-item>
                        <el-form-item label="合同已履约回款：">
                            <el-input v-model="formBaseModel.returnedMoney" disabled/>
                        </el-form-item>
                        <el-form-item label="合同未履约回款：">
                            <el-input v-model="formBaseModel.unreturnedMoney" disabled/>
                        </el-form-item>
                    </el-form>
                </el-scrollbar>
            </div>
            <div class="base-invoice-box" v-if="!isDisabled">
                <el-scrollbar>
                    <div class="title">开票相关信息</div>
                    <div class="invoice-form">
                        <el-form ref="formInvoiceRef"
                                 :model="formBaseModel"
                                 :rules="formInvoiceRules"
                                 :disabled="isDisabled"
                                 label-position="left"
                                 label-width="auto"
                                 size="large"
                        >
                            <el-form-item label="发票抬头：">
                                <el-input v-model="formBaseModel.invoiceHead"/>
                            </el-form-item>
                            <el-form-item label="纳税人识别号：">
                                <el-input v-model="formBaseModel.taxpayerNumber"/>
                            </el-form-item>
                            <el-form-item label="开户银行：">
                                <el-input v-model="formBaseModel.openAccountBank"/>
                            </el-form-item>
                            <el-form-item label="银行账户：">
                                <el-input v-model="formBaseModel.bankAccount"/>
                            </el-form-item>
                            <el-form-item label="收件人：">
                                <el-input v-model="formBaseModel.addresseeUserName"/>
                            </el-form-item>
                            <el-form-item label="联系电话：">
                                <el-input v-model="formBaseModel.addresseePhone"/>
                            </el-form-item>
                            <el-form-item label="邮寄地址：">
                                <el-input v-model="formBaseModel.mailingAddress"
                                    :autosize="{ minRows: 5, maxRows: 8 }"
                                    type="textarea"
                                />
                            </el-form-item>
                        </el-form>
                    </div>
                </el-scrollbar>
            </div>
        </div>
        <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,onActivated} from "vue";
import {useRouter,useRoute} from 'vue-router'
import {getArrValue,formValidate} from "js-fast-way"


const router = useRouter()
const useRoutes = useRoute()
const dataType = ref(useRoutes?.query?.type ?? '')
//参数
const props = defineProps({
    datas: {
        type: Object,
        default: () => ({})
    },
    disabled: {
        type: Boolean,
        default: false
    },
    saveLoaing:{
        type: Boolean,
        default: false
    },
    contractType:{
        type:Array,
        default:()=>([])
    },
    projectList:{
        type:Array,
        default:()=>([])
    },
 
})

const infoData = ref(props.datas)
const isDisabled = ref(props.disabled)
const saveLoaingVal=ref(props.saveLoaing)
const formBaseModel = ref(props.datas)
//获取合同类型
const contractTypeval=ref(props.contractType)

//所属项目projectList
const projectListval=ref(props.projectList)

//深度监听
watch(() => [
    props.datas,
    formBaseModel
], ([datas,val]) => {
    console.log(val,'val');
    emit('update:datas', val)
    infoData.value = datas
    formBaseModel.value=datas
    betweenTime.value[0]=val.value['startTime']
    betweenTime.value[1]=val.value['endTime']
}, {deep: true})

//监听
watch(() => [
    props.disabled,
    props.saveLoaing,
    props.contractType,
    props.projectList
], ([disabled,saveLoaing,contractType,projectList]) => {
    isDisabled.value = disabled
    saveLoaingVal.value=saveLoaing
    contractTypeval.value=contractType
    projectListval.value=projectList
})

//基础表单
const formBaseRef = ref(null)

const formBaseRules = {
    name: [
        {required: true, message: '请输入合同名称', trigger: 'blur'},
    ],
    contractType: [
        {required: true, message: '请选择合同类型', trigger: 'blur'},
    ],
    projectId: [
        {required: true, message: '请选择所属项目', trigger: 'blur'},
    ],
    contractMoney: [
        {required: true, message: '请输入合同金额', trigger: 'blur'},
    ],
    contractSignTime: [
        {required: true, message: '请选择签订时间', trigger: 'blur'},
    ],
  
}

//日期时间被选择
const betweenTime = ref([ infoData.value['startTime'],infoData.value['endTime']])
const betweenTimeUpdate = ({arr, query}) => {
    betweenTime.value = arr
    formBaseModel.value.startTime=arr[0]
    formBaseModel.value.endTime=arr[1]
}


//开发票表单
const formInvoiceRef = ref(null)
const formInvoiceModel = ref({})
const formInvoiceRules = {}


//返回
const goBackClick = () => {
    router.back()
}
const emit= defineEmits(['saveClick',"update:datas"])

//提交保存
const saveClick = async() => {
    console.log(formBaseModel.value,'formBaseModel');
    let startTime=formBaseModel.value.startTime
    let endTime=formBaseModel.value.endTime
    if(!startTime||!endTime){
        window.$message.warning('请选择合同起止日期')
    }
    const res = await formValidate(formBaseRef.value)
    if(res&&startTime&&endTime){
        emit('saveClick')
    }
    
 

}


</script>

<style scoped lang="scss">
@import "~src/styles/project/contract/form.scoped.scss";
</style>