rose
4 years ago
10 changed files with 379 additions and 8 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