我现在是利用v-modle双向绑定的父子组件,请求接口和编辑数据已经实现了,现在出现一个问题是 后端调用接口返回的数据为何不显示出来,还是什么方法才可以
<template>
<div class="Contentarea">
<div class="Contitles">
<el-tabs
v-model="activeProductTab"
type="card"
:editable="!isDetail"
@edit="editProductTab"
>
<el-tab-pane
v-for="pitem in product"
:key="pitem.name"
:label="pitem.title"
:name="pitem.name"
>
<div class="Contitlescontent">
<div class="titl">
<div class="banner">产品基本信息</div>
<div class="ExandCol" @click="pitem.collapse = !pitem.collapse">
{{ pitem.collapse ? "收起" : "展开" }}
<i
:class="
pitem.collapse
? 'iconfont icon-pulldown'
: 'iconfont icon-withdraw'
"
></i>
</div>
</div>
<div v-show="pitem.collapse">
<div class="hide">
<div class="hide_left">
<div class="regionhide">
<span class="Commonstyle">产品名称: </span>
<div style="width: 306px; margin-left: -48px">
<el-input
maxlength="20"
v-model="pitem.productname"
placeholder="请输入产品名称"
:disabled="isDetail"
@input="pitem.title = pitem.productname"
></el-input>
</div>
<span
class="chooses"
@click="pitem.isOpenProj = true"
v-if="!isDetail"
>选择产品</span
>
<SelectProduct
v-show="pitem.isOpenProj"
@seleproj="selectProj"
@canproj="selectProj"
:data="pitem"
></SelectProduct>
</div>
<div class="regionhide">
<span class="Commonstyle"> 产品类型:</span>
<div style="width: 306px; margin-left: -48px">
<jh-select
v-model="pitem.prodtype"
codeset="CRM007"
required
placeholder="请选择"
:outputText="isDetail"
></jh-select>
</div>
</div>
<div class="Sysdescription">
<div style="margin-left: 64px; display: flex">
<span class="Commonstyle">产品描述: </span>
<div
class="description"
style="width: 760px; margin-left: 7px"
>
<el-input
v-model="pitem.proddesc"
type="textarea"
:autosize="{ minRows: 2, maxRows: 4 }"
placeholder="请输入详细的产品描述..."
:disabled="isDetail"
></el-input>
</div>
</div>
</div>
</div>
<div class="hide_right">
<div class="regionhide">
<span class="Commonstyle"> 产品规格:</span>
<div style="width: 306px; margin-left: -48px">
<el-input
v-model="pitem.normsname"
placeholder="请输入产品规格"
:disabled="isDetail"
></el-input>
</div>
</div>
<div class="regionhide">
<span class="Commonstyle">规格报价:</span>
<div style="width: 306px; margin-left: -48px">
<el-input
v-model="pitem.price"
placeholder="请输入规格报价"
:disabled="isDetail"
></el-input>
</div>
<span class="Percent">元</span>
</div>
</div>
</div>
<div class="System_module">
<div class="info">
<div class="infos">系统基础信息</div>
<div
class="System_ExandCol"
@click="pitem.systemcollapse = !pitem.systemcollapse"
>
{{ pitem.systemcollapse ? "收起" : "展开" }}
<i
:class="
pitem.systemcollapse
? 'iconfont icon-withdraw'
: 'iconfont icon-pulldown'
"
></i>
</div>
</div>
<div class="System_span" v-show="pitem.systemcollapse">
<el-tabs
v-model="pitem.activeSystemTab"
type="card"
:editable="!isDetail"
@tab-add="editSystemTab('', pitem)"
@tab-remove="editSystemTab"
>
<el-tab-pane
v-for="sitem in pitem.system"
:key="sitem.name"
:label="sitem.title"
:name="sitem.name"
>
<div class="Systeminfo">
<div class="Systen_left">
<div class="Systename">
<span> 系统名称:</span>
<div style="width: 306px">
<el-input
v-model="sitem.sysname"
placeholder="请输入内容"
@input="sitem.title = sitem.sysname"
:disabled="isDetail"
></el-input>
</div>
</div>
<span
class="chosePro"
@click="sitem.isOpenSys = true"
v-if="!isDetail"
>选择系统</span
>
<SelectSystem
v-show="sitem.isOpenSys"
@selesys="selectSys"
@canproj="selectSys"
:data="sitem"
></SelectSystem>
<div class="Systemstage">
<span> 耗费人天:</span>
<div style="width: 306px">
<el-input
v-model="sitem.artificial"
placeholder="请输入内容"
:disabled="isDetail"
></el-input>
</div>
</div>
<div class="SystemDiere">
<span> 系统描述:</span>
<div style="width: 767px">
<el-input
v-model="sitem.sysdesc"
type="textarea"
:autosize="{ minRows: 2, maxRows: 4 }"
placeholder="请输入详细的系统描述..."
:disabled="isDetail"
></el-input>
</div>
</div>
</div>
<div class="Systen_right">
<div class="System_type">
<span> 系统类型:</span>
<div style="width: 306px">
<jh-select
v-model="sitem.systype"
codeset="CRM006"
required
:outputText="isDetail"
placeholder="请选择客户联系方式"
></jh-select>
<!-- <el-input
v-model="sitem.systype"
placeholder="请输入内容"
:disabled="isDetail"
></el-input> -->
</div>
</div>
<div class="System_type" style="margin-top: 4px">
<span> 系统报价:</span>
<div style="width: 306px">
<el-input
placeholder="请输入内容"
v-model="sitem.price"
:disabled="isDetail"
></el-input>
</div>
</div>
</div>
</div>
<div class="info">
<div class="infos">模块信息</div>
<div
class="System_ExandCol"
@click="sitem.modulecollapse = !sitem.modulecollapse"
>
{{ sitem.modulecollapse ? "收起" : "展开" }}
<i
:class="
sitem.modulecollapse
? 'iconfont icon-withdraw'
: 'iconfont icon-pulldown'
"
></i>
</div>
</div>
<div class="Module_span" v-show="sitem.modulecollapse">
<el-tabs
v-model="sitem.activeModuleTab"
type="card"
:editable="!isDetail"
@tab-add="editModuleTab('', sitem)"
@tab-remove="editModuleTab"
>
<el-tab-pane
v-for="mitem in sitem.module"
:key="mitem.name"
:label="mitem.title"
:name="mitem.name"
>
<div class="System_template_info">
<div class="System_template_infos">
<div class="System_template_moudleinfo">
<div class="System_template_moudleinfo_title">
<div style="display: flex">
<div class="images">
<!-- <img
src="../../../assets/images/business/images/moudle.png"
/> -->
</div>
<span></span>
</div>
</div>
<div class="Systeminfo">
<div class="Systen_left">
<div class="Systename">
<span>模块名称:</span>
<div
style="
width: 306px;
margin-left: 15px;
"
>
<el-input
v-model="mitem.modulename"
placeholder="请输入模块名称"
:disabled="isDetail"
@input="
mitem.title = mitem.modulename
"
></el-input>
</div>
</div>
<span
class="chosePro"
@click="mitem.isOpenModule = true"
v-if="!isDetail"
>选择模块</span
>
<SelectModule
v-show="mitem.isOpenModule"
@listshangji="selectModule"
@gettelephone="selectModule"
:data="mitem"
/>
<div class="Systemstage">
<span> 耗费人天:</span>
<div
style="
width: 306px;
margin-left: 15px;
"
>
<el-input
v-model="mitem.artificial"
placeholder="请输入耗费人天"
:disabled="isDetail"
></el-input>
</div>
</div>
<div class="Systemstage">
<span> 模块描述:</span>
<div
style="
width: 306px;
margin-left: 15px;
"
>
<el-input
v-model="mitem.moduledesc"
placeholder="请输入模块描述"
:disabled="isDetail"
></el-input>
</div>
</div>
</div>
<div class="Systen_right">
<div class="System_type">
<span> 模块报价:</span>
<div
style="
width: 291px;
margin-left: 15px;
"
>
<el-input
v-model="mitem.price"
placeholder="请输入模块报价"
:disabled="isDetail"
></el-input>
</div>
</div>
</div>
</div>
<div class="infobottom">
<div class="info">
<div class="infos">模块功能列表</div>
</div>
<div class="tableInfo">
<el-table
:data="mitem.func"
tooltip-effect="dark"
border
style="
width: 100%;
background: #f6f6f6;
border: 1px solid #dddddd;
"
>
<el-table-column
type="selection"
width="55"
></el-table-column>
<el-table-column
prop="funcname"
label="功能名称"
width="auto"
>
<template slot-scope="scope">
<div
class="MiddleEdit"
v-show="!isDetail"
>
<el-input
v-model="scope.row.funcname"
></el-input>
</div>
</template>
</el-table-column>
<el-table-column
prop="funcdesc"
label="功能描述"
width="auto"
>
<template slot-scope="scope">
<div
class="password"
v-show="!isDetail"
>
<el-input
v-model="scope.row.funcdesc"
></el-input>
</div>
</template>
</el-table-column>
<el-table-column
prop="funcprice"
label="功能报价"
width="auto"
>
<template slot-scope="scope">
<div
class="trialStatus"
v-show="!isDetail"
>
<el-input
v-model="scope.row.funcprice"
></el-input>
</div>
</template>
</el-table-column>
<el-table-column
prop="artificial"
label="耗费工时(天)"
width="auto"
>
<template slot-scope="scope">
<div
class="trialStatus"
v-show="!isDetail"
>
<el-input
v-model="scope.row.artificial"
></el-input>
</div>
</template>
</el-table-column>
<el-table-column
fixed="right"
label="操作"
width="auto"
v-show="!isDetail"
>
<template
style="#FE5D5D"
slot-scope="scope"
>
<el-button
width="20"
type="text"
size="small"
@click="
removeRunc(mitem, scope.$index)
"
>移除</el-button
>
</template>
</el-table-column>
</el-table>
</div>
<el-row v-show="!isDetail">
<el-button
type="primary"
plain
size="medium"
@click="addFunc(mitem)"
>新增一行</el-button
>
</el-row>
</div>
</div>
</div>
</div>
</el-tab-pane>
</el-tabs>
</div>
</el-tab-pane>
</el-tabs>
</div>
</div>
</div>
</div>
</el-tab-pane>
</el-tabs>
</div>
</div>
</template>
<script>
import SelectProduct from "../../CRM/business/compents/Selectproduct.vue";
import SelectSystem from "../../CRM/business/compents/selectSyst.vue";
import SelectModule from "./Selectmodule.vue";
export default {
components: {
SelectProduct,
SelectSystem,
SelectModule,
},
props: {
value: Array,
isDetail: Boolean,
},
data() {
return {
activeProductTab: "1",
product: this.value,
};
},
mounted: function () {
if (this.value && this.value.length == 0) {
this.product.push(this.initProductObject(0));
}
},
watch: {
product() {
this.$emit("input", this.product);
},
},
};
</script>