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

<template>
    <HcCard action-ui="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"
                        label-position="left"
                        label-width="auto"
                        size="large"
                    >
                        <el-form-item label="合同编号：">
                            <el-input v-model="formBaseModel.number" :disabled="isDisabled" />
                        </el-form-item>
                        <el-form-item label="合同名称：" prop="name">
                            <el-input v-model="formBaseModel.name" :disabled="isDisabled" />
                        </el-form-item>
                  
                        <el-form-item label="合同类型：" prop="contractType">
                            <el-select v-model="formBaseModel.contractType" block clearable placeholder="合同类型：" :disabled="isDisabled">
                                <el-option v-for="item in contractTypeval" :key="item.dictValue" :label="item.dictName" :value="item.dictValue" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="合同金额：" prop="contractMoney">
                            <el-input v-model="formBaseModel.contractMoney" :disabled="isDisabled" />
                        </el-form-item>
                        <el-form-item label="所属项目：" prop="projectId" block clearable placeholder="所属项目：">
                            <el-select v-model="formBaseModel.projectId" block :disabled="isDisabled || dataType === 'edit'">
                                <el-option v-for="item in projectListval" :key="item.id" :label="item.name" :value="item.id" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="签订时间：" prop="contractSignTime">
                            <el-date-picker v-model="formBaseModel.contractSignTime" class="block" format="YYYY-MM-DD" type="date" value-format="YYYY-MM-DD" :disabled="isDisabled" />
                        </el-form-item>
                        <el-form-item label="合同起止日期：">
                            <HcDatePicker :dates="betweenTime" clearable :disabled="isDisabled" @change="betweenTimeUpdate" />
                        </el-form-item>
                        <el-form-item label="对方单位回款联系人名称：">
                            <el-input v-model="formBaseModel.returnedUserName" :disabled="isDisabled" />
                        </el-form-item>
                        <el-form-item label="对方单位回款联系人电话：">
                            <el-input v-model="formBaseModel.returnedUserPhone" :disabled="isDisabled" />
                        </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 v-if="!isDisabled" class="base-invoice-box">
                <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.unitAddr" />
                            </el-form-item>
                            <el-form-item label="单位电话">
                                <el-input v-model="formBaseModel.unitPhone" />
                            </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 v-if="!isDisabled" size="large" type="primary" hc-btn :loading="saveLoaingVal" @click="saveClick">
                <HcIcon name="check-double" />
                <span>提交保存</span>
            </el-button>
        </template>
    </HcCard>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { formValidate } from 'js-fast-way'


//参数
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:()=>([]),
    },
    isres:{
        type: Boolean,
        default: false, //验证是否可以保存
    },
 
})
const emit = defineEmits(['saveClick', 'update:datas', 'changeIsres'])
const router = useRouter()
const useRoutes = useRoute()
const dataType = ref(useRoutes?.query?.type ?? '')
const infoData = ref(props.datas)
const isDisabled = ref(props.disabled)
const saveLoaingVal = ref(props.saveLoaing)
const formBaseModel = ref(props.datas)
const isresdata = ref(props.isres)
//获取合同类型
const contractTypeval = ref(props.contractType)

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

//深度监听
watch(() => [
    props.datas,
    formBaseModel,
    props.isres,
], ([datas, val, isres]) => {
    console.log(val, 'val')
    emit('update:datas', val)
    dataType.value = useRoutes?.query?.type ?? ''
    infoData.value = datas
    formBaseModel.value = datas
    betweenTime.value[0] = val.value['startTime']
    betweenTime.value[1] = val.value['endTime']
    isresdata.value = isres
}, { 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 }) => {
    betweenTime.value = arr
    formBaseModel.value.startTime = arr[0]
    formBaseModel.value.endTime = arr[1]
}


//开发票表单
const formInvoiceRef = ref(null)

const formInvoiceRules = {}


//返回
const goBackClick = () => {
    router.back()
}
//提交保存
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)
    emit('changeIsres', res)
    if (res && startTime && endTime) {
        emit('saveClick')
    }
    
 

}
</script>

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