国内申请

src/main/vue/src/components/Divider.vue

@@ -1,11 +1,37 @@
 <template>
-    <div class="page-divider">
-        <slot> 基本信息</slot>
+    <div class="page-divider" :class="{ topLine, showMore }">
+        <div class="top-line" v-if="topLine"></div>
+        <div class="main"><slot> 基本信息</slot></div>
+
+        <el-button type="text" @click="changeShow" v-if="collapse">
+            {{ showMore ? '折叠' : '展开' }}
+            <i class="el-icon-arrow-up btn-icon" :class="{ down: !showMore }"></i>
+        </el-button>
     </div>
 </template>
 
 <script>
-export default {};
+export default {
+    props: {
+        collapse: {
+            type: Boolean,
+            default: false
+        },
+        topLine: {
+            type: Boolean,
+            default: false
+        },
+        showMore: {
+            type: Boolean,
+            default: true
+        }
+    },
+    methods: {
+        changeShow() {
+            this.$emit('update:showMore', !this.showMore);
+        }
+    }
+};
 </script>
 
 <style lang="less" scoped>
@@ -17,7 +43,7 @@ export default {};
     padding: 16px 0;
     position: relative;
     border-bottom: 1px solid #f2f3f5;
-    margin-bottom: 20px;
+    display: flex;
 
     &::before {
         content: '';
@@ -28,5 +54,40 @@ export default {};
         left: -20px;
         top: 20px;
     }
+    &.topLine {
+        padding-top: 21px;
+        &::before {
+            top: 25px;
+        }
+    }
+
+    &.showMore {
+        margin-bottom: 20px;
+    }
+    .top-line {
+        height: 5px;
+        background-color: #f2f3f5;
+        position: absolute;
+        top: 0;
+        left: -20px;
+        right: -20px;
+    }
+
+    .main {
+        flex-grow: 1;
+    }
+
+    .el-button {
+        color: #949699;
+        padding: 4px 0;
+    }
+}
+
+.btn-icon {
+    transition: transform ease-in-out 0.3s;
+
+    &.down {
+        transform: rotate(180deg);
+    }
 }
 </style>

src/main/vue/src/components/domesticPatent/BaseInfo.vue

@@ -1,214 +1,206 @@
 <template>
     <div class="edit-view__content-wrapper">
-        <div class="edit-view__content-section">
-            <divider />
+        <div class="edit-view__content-section" :class="{ bottomPad: otherShow }">
+            <divider collapse :showMore.sync="baseShow" />
             <el-form
                 :model="formData"
                 :rules="rules"
                 ref="form"
-                label-width="178px"
+                label-width="200px"
                 label-position="right"
                 size="small"
-                style="max-width: 500px;"
+                style="width:100%"
+                inline
+                center
             >
-                <el-form-item prop="workflow" label="流程">
-                    <el-select v-model="formData.workflow" clearable filterable placeholder="请选择">
-                        <el-option
-                            v-for="item in workflowOptions"
-                            :key="item.value"
-                            :label="item.label"
-                            :value="item.value"
+                <div class="base-item" v-show="baseShow">
+                    <el-form-item prop="name" label="专利名称">
+                        <el-input v-model="formData.name" style="width: 600px;" @change="submit"></el-input>
+                    </el-form-item>
+                    <el-form-item prop="status" label="案件状态">
+                        <el-select v-model="formData.status" disabled clearable filterable placeholder="请选择">
+                            <el-option
+                                v-for="item in statusOptions"
+                                :key="item.value"
+                                :label="item.label"
+                                :value="item.value"
+                            >
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item prop="type" label="专利类型">
+                        <el-select v-model="formData.type" clearable filterable placeholder="请选择">
+                            <el-option
+                                v-for="item in typeOptions"
+                                :key="item.value"
+                                :label="item.label"
+                                :value="item.value"
+                            >
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item prop="uwNo" label="寰球案号">
+                        <el-input v-model="formData.uwNo" disabledÎ></el-input>
+                    </el-form-item>
+                    <el-form-item prop="clientPartnerId" label="客户">
+                        <el-select
+                            style="width: 200px;"
+                            v-model="formData.clientPartnerId"
+                            clearable
+                            filterable
+                            placeholder="请选择"
                         >
-                        </el-option>
-                    </el-select>
-                </el-form-item>
-                <el-form-item prop="applicantUscc" label="申请人统一社会信用代码">
-                    <el-input v-model="formData.applicantUscc"></el-input>
-                </el-form-item>
-                <el-form-item prop="inventorIdno" label="第一发明人身份证">
-                    <el-input v-model="formData.inventorIdno"></el-input>
-                </el-form-item>
-                <el-form-item prop="deduction" label="是否请求费减">
-                    <el-switch v-model="formData.deduction"></el-switch>
-                </el-form-item>
-                <el-form-item prop="essentialReview" label="是否请求实质审查">
-                    <el-switch v-model="formData.essentialReview"></el-switch>
-                </el-form-item>
-                <el-form-item prop="publicInAdvance" label="是否申请提前公开">
-                    <el-switch v-model="formData.publicInAdvance"></el-switch>
-                </el-form-item>
-                <el-form-item prop="chapterAcceptanceNotice" label="是否申请红章受理通知书">
-                    <el-switch v-model="formData.chapterAcceptanceNotice"></el-switch>
-                </el-form-item>
-                <el-form-item prop="chapterPaymentNotice" label="是否申请红章缴费通知书">
-                    <el-switch v-model="formData.chapterPaymentNotice"></el-switch>
-                </el-form-item>
-                <el-form-item prop="decideReply" label="是否决定答复">
-                    <el-switch v-model="formData.decideReply"></el-switch>
-                </el-form-item>
-                <el-form-item prop="isClientReady" label="准备答复意见">
-                    <el-switch v-model="formData.isClientReady"></el-switch>
-                </el-form-item>
-                <el-form-item prop="replyPassed" label="是否通过答复">
-                    <el-switch v-model="formData.replyPassed"></el-switch>
-                </el-form-item>
-                <el-form-item prop="registerNotice" label="办登通知日">
-                    <el-date-picker
-                        v-model="formData.registerNotice"
-                        type="date"
-                        value-format="yyyy-MM-dd"
-                        placeholder="选择日期"
-                    >
-                    </el-date-picker>
-                </el-form-item>
-                <el-form-item prop="registerEndDate" label="办登截止日">
-                    <el-date-picker
-                        v-model="formData.registerEndDate"
-                        type="date"
-                        value-format="yyyy-MM-dd"
-                        placeholder="选择日期"
-                    >
-                    </el-date-picker>
-                </el-form-item>
-                <el-form-item prop="feeRemark" label="费用备注">
-                    <el-input v-model="formData.feeRemark"></el-input>
-                </el-form-item>
-                <el-form-item prop="payment" label="是否已缴费">
-                    <el-switch v-model="formData.payment"></el-switch>
-                </el-form-item>
-                <el-form-item prop="annualFee" label="年费">
-                    <el-input-number type="number" v-model="formData.annualFee"></el-input-number>
-                </el-form-item>
-                <el-form-item prop="feePaymentPeriod" label="年费支付期限">
-                    <el-date-picker
-                        v-model="formData.feePaymentPeriod"
-                        type="date"
-                        value-format="yyyy-MM-dd"
-                        placeholder="选择日期"
-                    >
-                    </el-date-picker>
-                </el-form-item>
-                <el-form-item prop="bill" label="账单">
-                    <el-input v-model="formData.bill"></el-input>
-                </el-form-item>
+                            <el-option
+                                v-for="item in clientPartnerIdOptions"
+                                :key="item.value"
+                                :label="item.label"
+                                :value="item.value"
+                            >
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
 
-                <el-form-item prop="name" label="专利名称">
-                    <el-input v-model="formData.name"></el-input>
-                </el-form-item>
-                <el-form-item prop="status" label="状态">
-                    <el-select v-model="formData.status" clearable filterable placeholder="请选择">
-                        <el-option
-                            v-for="item in statusOptions"
-                            :key="item.value"
-                            :label="item.label"
-                            :value="item.value"
+                    <el-form-item prop="supplierNo" label="供应商案号">
+                        <el-input v-model="formData.supplierNo"></el-input>
+                    </el-form-item>
+
+                    <el-form-item prop="supplierPartnerId" label="供应商">
+                        <el-select
+                            style="width: 200px;"
+                            v-model="formData.supplierPartnerId"
+                            clearable
+                            filterable
+                            placeholder="请选择"
                         >
-                        </el-option>
-                    </el-select>
-                </el-form-item>
-                <el-form-item prop="type" label="专利类型">
-                    <el-select v-model="formData.type" clearable filterable placeholder="请选择">
-                        <el-option
-                            v-for="item in typeOptions"
-                            :key="item.value"
-                            :label="item.label"
-                            :value="item.value"
+                            <el-option
+                                v-for="item in supplierPartnerIdOptions"
+                                :key="item.value"
+                                :label="item.label"
+                                :value="item.value"
+                            >
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+
+                    <el-form-item prop="applyNo" label="国内专利申请号">
+                        <el-input v-model="formData.applyNo"></el-input>
+                    </el-form-item>
+
+                    <el-form-item prop="applyDate" label="国内专利申请日">
+                        <el-date-picker
+                            v-model="formData.applyDate"
+                            type="date"
+                            value-format="yyyy-MM-dd"
+                            placeholder="选择日期"
+                        >
+                        </el-date-picker>
+                    </el-form-item>
+
+                    <el-form-item prop="supplierSubmitPeriod" label="供应商提交期限">
+                        <el-date-picker
+                            v-model="formData.supplierSubmitPeriod"
+                            type="date"
+                            value-format="yyyy-MM-dd"
+                            placeholder="选择日期"
                         >
-                        </el-option>
-                    </el-select>
-                </el-form-item>
-                <el-form-item prop="uwNo" label="寰球案号">
-                    <el-input v-model="formData.uwNo"></el-input>
-                </el-form-item>
-                <el-form-item prop="clientPartnerId" label="客户id">
-                    <el-input-number type="number" v-model="formData.clientPartnerId"></el-input-number>
-                </el-form-item>
-                <el-form-item prop="supplierPartnerId" label="供应商">
-                    <el-input-number type="number" v-model="formData.supplierPartnerId"></el-input-number>
-                </el-form-item>
-                <el-form-item prop="supplierNo" label="供应商案号">
-                    <el-input v-model="formData.supplierNo"></el-input>
-                </el-form-item>
-                <el-form-item prop="supplierSubmitPeriod" label="供应商提交期限">
-                    <el-date-picker
-                        v-model="formData.supplierSubmitPeriod"
-                        type="date"
-                        value-format="yyyy-MM-dd"
-                        placeholder="选择日期"
-                    >
-                    </el-date-picker>
-                </el-form-item>
-                <el-form-item prop="applicantName" label="申请人名称">
-                    <el-input v-model="formData.applicantName"></el-input>
-                </el-form-item>
-                <el-form-item prop="applicantEnName" label="申请人英文名称">
-                    <el-input v-model="formData.applicantEnName"></el-input>
-                </el-form-item>
-                <el-form-item prop="applicantAddress" label="申请人地址">
-                    <el-input v-model="formData.applicantAddress"></el-input>
-                </el-form-item>
-                <el-form-item prop="applicantEnAddress" label="申请人英文地址">
-                    <el-input v-model="formData.applicantEnAddress"></el-input>
-                </el-form-item>
-                <el-form-item prop="inventorName" label="发明人名称">
-                    <el-input v-model="formData.inventorName"></el-input>
-                </el-form-item>
-                <el-form-item prop="inventorEnName" label="发明人英文名称">
-                    <el-input v-model="formData.inventorEnName"></el-input>
-                </el-form-item>
-                <el-form-item prop="priorityNo" label="优先权号">
-                    <el-input v-model="formData.priorityNo"></el-input>
-                </el-form-item>
-                <el-form-item prop="priorityDate" label="优先权日">
-                    <el-date-picker
-                        v-model="formData.priorityDate"
-                        type="date"
-                        value-format="yyyy-MM-dd"
-                        placeholder="选择日期"
-                    >
-                    </el-date-picker>
-                </el-form-item>
-                <el-form-item prop="priorityCountry" label="优先权国别">
-                    <el-input v-model="formData.priorityCountry"></el-input>
-                </el-form-item>
-                <el-form-item prop="submitPeriod" label="提交期限/内部期限">
-                    <el-date-picker
-                        v-model="formData.submitPeriod"
-                        type="date"
-                        value-format="yyyy-MM-dd"
-                        placeholder="选择日期"
-                    >
-                    </el-date-picker>
-                </el-form-item>
-                <el-form-item prop="officialPeriod" label="官方期限">
-                    <el-date-picker
-                        v-model="formData.officialPeriod"
-                        type="date"
-                        value-format="yyyy-MM-dd"
-                        placeholder="选择日期"
-                    >
-                    </el-date-picker>
-                </el-form-item>
-                <el-form-item prop="applyNo" label="申请号">
-                    <el-input v-model="formData.applyNo"></el-input>
-                </el-form-item>
-                <el-form-item prop="applyDate" label="申请日">
-                    <el-date-picker
-                        v-model="formData.applyDate"
-                        type="date"
-                        value-format="yyyy-MM-dd"
-                        placeholder="选择日期"
-                    >
-                    </el-date-picker>
-                </el-form-item>
+                        </el-date-picker>
+                    </el-form-item>
+
+                    <el-form-item prop="officialPeriod" label="官方期限">
+                        <el-date-picker
+                            v-model="formData.officialPeriod"
+                            type="date"
+                            value-format="yyyy-MM-dd"
+                            placeholder="选择日期"
+                        >
+                        </el-date-picker>
+                    </el-form-item>
+                </div>
+
+                <divider collapse topLine :showMore.sync="personShow">申请人及发明人 </divider>
+                <div class="base-item" v-show="personShow">
+                    <el-form-item prop="applicantName" label="申请人名称">
+                        <el-input v-model="formData.applicantName" placeholder="请输入"></el-input>
+                    </el-form-item>
+
+                    <el-form-item prop="applicantUscc" label="申请人统一社会信用代码">
+                        <el-input v-model="formData.applicantUscc" placeholder="请输入"></el-input>
+                    </el-form-item>
+                    <el-form-item prop="applicantAddress" label="申请人地址">
+                        <el-input
+                            style="width:600px;"
+                            placeholder="请输入"
+                            v-model="formData.applicantAddress"
+                        ></el-input>
+                    </el-form-item>
+                    <el-form-item prop="inventorName" label="发明人姓名">
+                        <el-input v-model="formData.inventorName" placeholder="请输入"></el-input>
+                    </el-form-item>
+                    <el-form-item prop="inventorIdno" label="第一发明人身份证号码">
+                        <el-input v-model="formData.inventorIdno" placeholder="请输入"></el-input>
+                    </el-form-item>
+                </div>
+                <divider collapse topLine :showMore.sync="otherShow">其他信息 </divider>
+                <div class="base-item" v-show="otherShow">
+                    <el-form-item prop="deduction" label="是否请求费减">
+                        <el-select v-model="formData.deduction">
+                            <el-option
+                                v-for="(item, index) in boolOptions"
+                                :key="index"
+                                :label="item.label"
+                                :value="item.value"
+                            >
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item prop="essentialReview" label="是否请求实质审查">
+                        <el-select v-model="formData.essentialReview">
+                            <el-option
+                                v-for="(item, index) in boolOptions"
+                                :key="index"
+                                :label="item.label"
+                                :value="item.value"
+                            >
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
 
-                <el-form-item class="form-submit">
-                    <el-button @click="onSave" :loading="saving" size="default" type="primary">保存 </el-button>
-                    <el-button @click="onDelete" :loading="saving" size="default" type="danger" v-if="formData.id"
-                        >删除
-                    </el-button>
-                    <el-button @click="$router.go(-1)" size="default">取消</el-button>
-                </el-form-item>
+                    <el-form-item prop="publicInAdvance" label="是否申请提前公开">
+                        <el-select v-model="formData.publicInAdvance">
+                            <el-option
+                                v-for="(item, index) in boolOptions"
+                                :key="index"
+                                :label="item.label"
+                                :value="item.value"
+                            >
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+
+                    <el-form-item prop="chapterAcceptanceNotice" label="是否申请红章受理通知书">
+                        <el-select v-model="formData.chapterAcceptanceNotice">
+                            <el-option
+                                v-for="(item, index) in boolOptions"
+                                :key="index"
+                                :label="item.label"
+                                :value="item.value"
+                            >
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+
+                    <el-form-item prop="chapterPaymentNotice" label="是否申请红章缴费通知书">
+                        <el-select v-model="formData.chapterPaymentNotice">
+                            <el-option
+                                v-for="(item, index) in boolOptions"
+                                :key="index"
+                                :label="item.label"
+                                :value="item.value"
+                            >
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                </div>
             </el-form>
         </div>
     </div>
@@ -219,6 +211,38 @@ import domesticPatent from '@/mixins/domesticPatent';
 export default {
     name: 'DomesticPatentEdit',
     mixins: [domesticPatent],
+    created() {
+        this.$http
+            .post('/partner/all', { size: 1000, query: { del: false } }, { body: 'json' })
+            .then(res => {
+                if (res.content.length > 0) {
+                    this.clientPartnerIdOptions = res.content
+                        .filter(item => {
+                            return item.type === 'CLIENT';
+                        })
+                        .map(item => {
+                            return {
+                                label: item.name,
+                                value: item.id
+                            };
+                        });
+                    this.supplierPartnerIdOptions = res.content
+                        .filter(item => {
+                            return item.type === 'SUPPLIER';
+                        })
+                        .map(item => {
+                            return {
+                                label: item.name,
+                                value: item.id
+                            };
+                        });
+                }
+            })
+            .catch(e => {
+                console.log(e);
+                this.$message.error(e.error);
+            });
+    },
     props: {
         info: {
             type: Object,
@@ -231,12 +255,27 @@ export default {
         return {
             saving: false,
             formData: {},
-            rules: {}
+            rules: {},
+            clientPartnerIdOptions: [],
+            supplierPartnerIdOptions: [],
+            personShow: true,
+            baseShow: true,
+            otherShow: true,
+            boolOptions: [
+                {
+                    label: '是',
+                    value: true
+                },
+                {
+                    label: '否',
+                    value: false
+                }
+            ]
         };
     },
     methods: {
         init() {
-            this.formData = this.info;
+            this.formData = { ...this.info };
         },
         onSave() {
             this.$refs.form.validate(valid => {
@@ -283,4 +322,17 @@ export default {
     }
 };
 </script>
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.base-item {
+    width: 800px;
+    padding-right: 200px;
+    margin: 0 auto;
+}
+
+.edit-view .edit-view__content-wrapper .edit-view__content-section {
+    padding-bottom: 0px;
+    &.bottomPad {
+        padding-bottom: 20px;
+    }
+}
+</style>