rose
4 years ago
10 changed files with 425 additions and 26 deletions
@ -0,0 +1,227 @@ |
|||
<template> |
|||
<div class="main flex-1"> |
|||
<div>是否显示了</div> |
|||
<a-spin :spinning="showEdit"> |
|||
<div style="width:100%" v-if="lists && lists.length > 0"> |
|||
<a-table |
|||
:columns="columns" |
|||
:data-source="lists" |
|||
:loading="loading" |
|||
:pagination="pagination" |
|||
:row-key="record => record.id" |
|||
:scroll="{ y: height }" |
|||
@change="handleTableChange" |
|||
@expand="getDetail" |
|||
bordered |
|||
class="white" |
|||
> |
|||
<template slot="id" slot-scope="text, record, index"> |
|||
<span>{{ index + 1 }}</span> |
|||
</template> |
|||
|
|||
<!-- 图片 --> |
|||
<template slot="visitLocation" slot-scope="text, record"> |
|||
<img :src="record.visitLocation" height="50" width="50" /> |
|||
</template> |
|||
|
|||
<template slot="edit" slot-scope="text, record"> |
|||
<a-icon @click="showEditModal(record)" class="pointer" theme="twoTone" type="edit" /> |
|||
<a-popconfirm |
|||
@confirm="() => onDelete(record.id)" |
|||
title="确定要删除这一条?" |
|||
v-if="lists.length" |
|||
> |
|||
<a-icon class="ml-4 pointer" theme="twoTone" two-tone-color="#ff0000" type="delete" /> |
|||
</a-popconfirm> |
|||
</template> |
|||
|
|||
|
|||
</a-table> |
|||
</div> |
|||
<a-empty v-else /> |
|||
<!-- <div>{{ editItem }}</div> --> |
|||
|
|||
<!-- 编辑 --> |
|||
<transfer-edit |
|||
:editItem="editItem" |
|||
:editVisible="editVisible" |
|||
:typeLists="typeLists" |
|||
@closeModal="closeModal" |
|||
@selInstrumentSearch="selInstrumentSearch" |
|||
/> |
|||
</a-spin> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import TransferEdit from 'components/Transfer/TransferEdit.vue'; |
|||
import { selInstrumentDelete, selInstrumentMes } from 'config/api'; |
|||
|
|||
const columns = [ |
|||
{ |
|||
title: '序号', |
|||
align: 'center', |
|||
dataIndex: 'id', |
|||
key: 'id', |
|||
width: '7%', |
|||
scopedSlots: { customRender: 'id' }, |
|||
}, |
|||
{ |
|||
title: '现居住地', |
|||
align: 'center', |
|||
dataIndex: 'residence', |
|||
key: 'residence', |
|||
}, |
|||
{ |
|||
title: '出生年月', |
|||
align: 'center', |
|||
dataIndex: 'birth', |
|||
key: 'birth', |
|||
}, |
|||
{ |
|||
title: '户口所在地', |
|||
align: 'center', |
|||
dataIndex: 'account', |
|||
key: 'account', |
|||
}, |
|||
{ |
|||
title: '教育经历', |
|||
align: 'center', |
|||
dataIndex: 'eduExperience', |
|||
key: 'eduExperience', |
|||
scopedSlots: { customRender: 'eduExperienchukz' }, |
|||
}, |
|||
{ |
|||
title: '电子邮件', |
|||
align: 'center', |
|||
dataIndex: 'email', |
|||
key: 'email', |
|||
scopedSlots: { customRender: 'email' }, |
|||
}, |
|||
{ |
|||
title: '工作经历', |
|||
align: 'center', |
|||
dataIndex: 'workExperience', |
|||
key: 'workExperience', |
|||
scopedSlots: { customRender: 'workExperience' }, |
|||
}, |
|||
{ |
|||
title: '求职意向', |
|||
align: 'center', |
|||
dataIndex: 'jobIntension', |
|||
key: 'jobIntension', |
|||
scopedSlots: { customRender: 'jobIntension' }, |
|||
}, |
|||
]; |
|||
|
|||
export default { |
|||
name: 'TransferDate', |
|||
components: { |
|||
TransferEdit, |
|||
}, |
|||
|
|||
props: { |
|||
lists: { type: Array, default: () => [] }, |
|||
pagination: { type: Object, default: () => {} }, |
|||
typeLists: { type: Array, default: () => [] }, |
|||
}, |
|||
|
|||
data() { |
|||
return { |
|||
columns, |
|||
loading: false, |
|||
height: '', |
|||
editVisible: false, |
|||
imgVisible: false, |
|||
spinning: false, |
|||
editItem: null, // 修改的那条 |
|||
showEdit: false, |
|||
}; |
|||
}, |
|||
|
|||
mounted() { |
|||
let th = 250; |
|||
let wh = window.innerHeight; |
|||
this.height = wh - th; |
|||
window.onresize = () => { |
|||
return (() => { |
|||
wh = window.innerHeight; |
|||
this.height = wh - th; |
|||
})(); |
|||
}; |
|||
}, |
|||
|
|||
methods: { |
|||
async showEditModal(record) { |
|||
console.log(record) |
|||
this.showEdit = true; |
|||
await this.getDetail(true, record); |
|||
this.showEdit = false; |
|||
this.editVisible = true; |
|||
this.editItem = record; |
|||
console.log('==============>showEditModal结束') |
|||
}, |
|||
|
|||
closeModal() { |
|||
this.editVisible = false; |
|||
}, |
|||
|
|||
async selInstrumentSearch() { |
|||
await this.$emit('selInstrumentSearch'); |
|||
}, |
|||
|
|||
handleTableChange(pagination) { |
|||
const { current, pageSize } = pagination; |
|||
const condition = { current, pageSize }; |
|||
this.$emit('selInstrumentSearch', condition); |
|||
}, |
|||
|
|||
// 详情查询 |
|||
async getDetail(expanded, record) { |
|||
if (!expanded) return; |
|||
try { |
|||
this.spinning = true; |
|||
const params = { param: { id: record.id } }; |
|||
const res = await selInstrumentMes(params); |
|||
const { data, msg, code } = res.data; |
|||
this.spinning = false; |
|||
if (code === 200) { |
|||
const item = this.lists.find(item => item.id === record.id); |
|||
item.info = data; |
|||
} else { |
|||
throw msg; |
|||
} |
|||
} catch (error) { |
|||
this.$message.error(error || '查询失败'); |
|||
} |
|||
}, |
|||
|
|||
// 删除 |
|||
async onDelete(id) { |
|||
try { |
|||
const params = { param: { id } }; |
|||
const res = await selInstrumentDelete(params); |
|||
const { data, msg, code } = res.data; |
|||
if (code === 200) { |
|||
this.$message.success('删除成功'); |
|||
this.$emit('selInstrumentSearch'); |
|||
} else { |
|||
throw msg; |
|||
} |
|||
} catch (error) { |
|||
this.$message.error(error || '删除失败'); |
|||
} |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="stylus" scoped> |
|||
.main .img { |
|||
height: 65px; |
|||
} |
|||
|
|||
.main .big_img { |
|||
width: 200px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,49 @@ |
|||
<template> |
|||
<div class="d-flex flex-wrap pb-3"> |
|||
<!-- 中文名称 --> |
|||
<div> |
|||
<a-input placeholder="设备名称" style="width: 150px" v-model="content" /> |
|||
<a-checkbox-group @change="onChange" class="ml-3"> |
|||
<a-checkbox :key="item.id" :value="item.id" v-for="item in typeLists.list">{{ item.name }}</a-checkbox> |
|||
</a-checkbox-group> |
|||
<a-button @click="handleTableChange" class="ml-3" type="primary">搜索</a-button> |
|||
</div> |
|||
|
|||
<div class="flex-1">121231233</div> |
|||
|
|||
|
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'ContactUsSearch', |
|||
props: { typeLists: { type: Array, default: () => [] } }, |
|||
data() { |
|||
return { |
|||
content: '', |
|||
modelIds: [], |
|||
}; |
|||
}, |
|||
methods: { |
|||
|
|||
|
|||
onChange(checkedValues) { |
|||
this.modelIds = checkedValues; |
|||
}, |
|||
|
|||
async handleTableChange() { |
|||
const { content, modelIds } = this; |
|||
// 传参 |
|||
const condition = { |
|||
content, |
|||
modelIds, |
|||
}; |
|||
await this.$emit('selInstrumentSearch', condition); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped lang="stylus"></style> |
|||
@ -0,0 +1,69 @@ |
|||
<template> |
|||
<div class="pa-3 white fill-height d-flex flex-column"> |
|||
<contact-us-search :type-lists="typeLists" @contactUsSearch="contactUsSearch" /> |
|||
<contact-us-date :lists="lists" :pagination="pagination" @contactUsSearch="contactUsSearch" /> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import ContactUsSearch from 'components/Contact/ContactUsSearch.vue'; |
|||
import ContactUsDate from 'components/Contact/ContactDate.vue'; |
|||
import { contactUsSearch } from 'config/api'; |
|||
import { mapActions } from 'vuex'; |
|||
|
|||
export default { |
|||
name: 'Contact', |
|||
components: { |
|||
ContactUsSearch, |
|||
ContactUsDate, |
|||
}, |
|||
|
|||
data() { |
|||
return { |
|||
lists: [], |
|||
pagination: { current: 1, pageSize: 10 }, |
|||
typeLists: [], |
|||
}; |
|||
}, |
|||
|
|||
async created() { |
|||
|
|||
await this.contactUsSearch(); |
|||
}, |
|||
|
|||
methods: { |
|||
...mapActions(['getSelModelSearch']), |
|||
|
|||
/** |
|||
* 后台查询修改 |
|||
* |
|||
*/ |
|||
async contactUsSearch(condition) { |
|||
try { |
|||
const params = { |
|||
param: { |
|||
pageNum: (condition && condition.current) || 1, |
|||
pageSize: (condition && condition.pageSize) || 10, |
|||
}, |
|||
}; |
|||
|
|||
const res = await contactUsSearch(params); |
|||
const { code, msg, data } = res.data; |
|||
if (code === 200) { |
|||
this.lists = data.list; |
|||
console.log("========>是否获取到数据") |
|||
const paper = { ...this.pagination }; |
|||
paper.current = data.pageNum; |
|||
paper.total = +data.total; |
|||
paper.pageSize = data.pageSize; |
|||
this.pagination = paper; |
|||
} else { |
|||
throw msg || '获取失败'; |
|||
} |
|||
} catch (error) { |
|||
this.$message.error(error); |
|||
} |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
Loading…
Reference in new issue