Merge pull request 'caolc' (#12) from caolc into master

Reviewed-on: #12
zyj
曹连存 2 years ago
commit e7fca62c03
  1. 6
      src/api/finance/openTicketApi.js
  2. 34
      src/components/generalDetails/README.md
  3. 51
      src/components/generalDetails/index.vue
  4. 2
      vue.config.js

@ -1,6 +1,6 @@
import request from '@/utils/request'
var service_name = 'xkhl-finance'
var group_name = 'OilCustomerInvoicRecord'
var group_name = 'saasCustomerInvoicRecord'
export default {
fuyous(){
@ -18,14 +18,14 @@ export default {
},
getInfo(id) { // 根据id查询
return request({
url: `/${service_name}/${group_name}/getInfo/${id}`,
url: `/${service_name}/saasCustomerInvoicRecord/getInfo/${id}`,
method: 'get'
})
},
save(oilCustomerInvoicRecord) { // 保存
return request({
url: `/${service_name}/${group_name}/save`,
url: `/${service_name}/saasCustomerInvoicRecord/save`,
method: 'post',
data: oilCustomerInvoicRecord
})

@ -0,0 +1,34 @@
组件 参数
sourceData : 数据源 类型:对象 {}
mappingData:映射表 类型:数组 []
isHeader:是否需要标题 默认为false 类型:布尔
title:详情标题 默认为 默认详情头 类型:字符串
mappingData 示例
[
{ //第一层 为卡片
carTitle://卡片标题
iconClass://图标名
isFold:是否可折叠
carItems:[
{
label:名称
value:显示的值 支持 string(相对相应的字段) array( 支持嵌套字段如['a','b'],实际为sourceData.a.b) functoin(接收一个参数为当前数据源,需返回一个字符串类型的值)
fieldDefault:默认值 value没有数据的时候现实的值
remark:备注
isCopy::是否可复制
field:字段
}
]
}
]
插槽模式 slot
header 整个组件的头部
field 每个字段都可以使用插槽自定义 插槽名称为相对应的字段
index card_bottom 每张卡片都有相对应的底部 index为索引
footer 整个组件的底部
index_car 整张卡片的插槽名称 index为卡片索引
#4_car="data" 将返回 当前卡片对象对应的值

@ -9,7 +9,7 @@
<slot name="title_bottom"></slot>
</div>
<div class="generalDetails_card_container">
<div v-for="(item, index) in dataPage" :key="index">
<div name v-for="(item, index) in dataPage" :key="index">
<el-card class="generalDetails_card">
<div @click="isShow(item)" class="generalDetails_card_header" slot="header">
<div>
@ -19,12 +19,17 @@
<span class="generalDetails-card-header-text">{{ item.title }}</span>
</div>
<div class="fold">
<i :style="{ transform: `rotate(${item.isFold ? 0 : 180}deg)` }"
class="el-icon-arrow-down generalDetails_card_arrow_down"></i>
<i
:style="{
transform: `rotate(${item.isFold ? 0 : 180}deg)`
}"
class="el-icon-arrow-down generalDetails_card_arrow_down"
></i>
</div>
</div>
<slot :name="`${index}_car`" :item="item">
<div :style="{ maxHeight: item.isFold ? '100vh' : '0px' }" class="my-cell">
<div v-for="(i, x) in item.listData " :key="x" class="cell-item">
<div v-for="(i, x) in item.listData" :key="x" class="cell-item">
<span :title="i.remark" class="color-999 test-tst">
{{ i.label }}
<i v-if="i.remark" class="header-icon el-icon-info"></i>
@ -36,13 +41,15 @@
</slot>
</div>
</div>
</slot>
</el-card>
<div>
<div >
<slot :name="`${index}card_bottom`"></slot>
</div>
</div>
</div>
<div class="generalDetails_footer">
<slot name="footer">
<el-button @click="close" type="primary" :size="$store.getters.size">关闭</el-button>
</slot>
@ -78,8 +85,10 @@ export default {
dataPage: []
}
},
created() {
(this.sourceData !== null) && (this.mappingData.length !== 0) && (this.init())
console.log('created')
this.sourceData !== null && this.mappingData.length !== 0 && this.init()
},
methods: {
isShow(item) {
@ -100,14 +109,32 @@ export default {
listData: item.carItems.map((carItem, index) => {
return {
label: carItem.label,
value: (typeof carItem.value =='function')&&(carItem.value(this.sourceData)) || this.sourceData[carItem.value] || carItem.fieldDefault || '暂无数据',
value:
(typeof carItem.value == 'function' && carItem.value(this.sourceData)) ||
(Array.isArray(carItem.value) &&
carItem.value.reduce((prev, current, index, _arr) =>
index == 1
? this.sourceData[prev]
? this.sourceData[prev][current] !== null && this.sourceData[prev][current] !== undefined
? this.sourceData[prev][current]
: '暂无数据'
: '暂无数据'
: typeof prev == 'object'
? prev[current]
: prev
)) ||
(this.sourceData[carItem.value] !== null && this.sourceData[carItem.value] !== undefined
? String(this.sourceData[carItem.value])
: false) ||
carItem.fieldDefault ||
'暂无数据',
field: carItem.value,
remark: carItem.remark,
isCopy: carItem.isCopy || false
}
})
}
});
})
console.log(this.dataPage)
}
}
@ -115,9 +142,10 @@ export default {
</script>
<style scoped>
.title_bottom{
.title_bottom {
margin-top: 20px;
}
.fold {
/* position: absolute;
bottom: 0px;
@ -130,7 +158,7 @@ export default {
}
.generalDetails_card_arrow_down {
transition: all .9s;
transition: all 0.9s;
}
.generalDetails_card_header {
@ -156,7 +184,7 @@ title {
flex-wrap: wrap;
max-height: 100vh;
overflow: hidden;
transition: all .9s;
transition: all 0.9s;
}
.color-999 {
@ -196,6 +224,7 @@ title {
padding: 15px 20px;
box-sizing: border-box;
border-top: solid 1px #e5e5e5;
z-index: 999999;
}
.generalDetails_header {

@ -26,7 +26,7 @@ module.exports = {
[process.env.VUE_APP_BASE_API]: {
// target: "http://uat.xingoil.com/adminapi",
// target: 'https://www.xingoil.com/adminapi',
target: `http://192.168.0.22:38080`,
target: `http://192.168.0.27:38080`,
changeOrigin: true,
pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: ''

Loading…
Cancel
Save