29 changed files with 1150 additions and 327 deletions
@ -0,0 +1,177 @@ |
|||
<template> |
|||
<div class="d-flex flex-wrap pb-3"> |
|||
<!-- 添加 --> |
|||
<a-modal :closable="false" footer title="添加行业资讯" v-model="visible" width="700px"> |
|||
<a-form :form="form" @submit="handleSubmit"> |
|||
<!-- 标题 --> |
|||
<a-form-item |
|||
:label-col="formItemLayout.labelCol" |
|||
:wrapper-col="formItemLayout.wrapperCol" |
|||
label="标题" |
|||
> |
|||
<a-input |
|||
placeholder="标题" |
|||
v-decorator="[ |
|||
'title', |
|||
{ |
|||
rules: [ |
|||
{ required: true, message: '标题不能为空' }, |
|||
{ whitespace: true, message: '标题不能为空' }, |
|||
{ max: 140, massage: '地点最多140个字符' }, |
|||
], |
|||
}, |
|||
]" |
|||
/> |
|||
</a-form-item> |
|||
<!-- 地点 --> |
|||
<a-form-item |
|||
:label-col="formItemLayout.labelCol" |
|||
:wrapper-col="formItemLayout.wrapperCol" |
|||
label="地点" |
|||
> |
|||
<a-input |
|||
placeholder="地点" |
|||
v-decorator="[ |
|||
'site', |
|||
{ |
|||
rules: [ |
|||
{ required: true, message: '地点不能为空' }, |
|||
{ whitespace: true, message: '地点不能为空' }, |
|||
{ max: 140, massage: '地点最多140个字符' }, |
|||
], |
|||
}, |
|||
]" |
|||
/> |
|||
</a-form-item> |
|||
<!-- 时间 --> |
|||
<a-form-item |
|||
:label-col="formItemLayout.labelCol" |
|||
:wrapper-col="formItemLayout.wrapperCol" |
|||
label="时间" |
|||
required |
|||
> |
|||
<a-date-picker |
|||
@change="onChange" |
|||
format="YYYY-MM-DD HH:mm:ss" |
|||
placeholder="请选择时间" |
|||
show-time |
|||
/> |
|||
</a-form-item> |
|||
|
|||
<!-- 发布部门 --> |
|||
<a-form-item |
|||
:label-col="formItemLayout.labelCol" |
|||
:wrapper-col="formItemLayout.wrapperCol" |
|||
label="发布部门" |
|||
> |
|||
<a-input |
|||
placeholder="发布部门" |
|||
v-decorator="[ |
|||
'spreadDepartment', |
|||
{ |
|||
rules: [ |
|||
{ required: true, message: '发布部门不能为空' }, |
|||
{ whitespace: true, message: '发布部门不能为空' }, |
|||
{ max: 140, massage: '发布部门最多140个字符' }, |
|||
], |
|||
}, |
|||
]" |
|||
/> |
|||
</a-form-item> |
|||
<!-- 简介 --> |
|||
<a-form-item |
|||
:label-col="formItemLayout.labelCol" |
|||
:wrapper-col="formItemLayout.wrapperCol" |
|||
label="简介" |
|||
> |
|||
<a-textarea |
|||
placeholder="简介" |
|||
v-decorator="[ |
|||
'description', |
|||
]" |
|||
/> |
|||
</a-form-item> |
|||
<!-- 详情 --> |
|||
<a-form-item |
|||
:label-col="formItemLayout.labelCol" |
|||
:wrapper-col="formItemLayout.wrapperCol" |
|||
label="详情" |
|||
> |
|||
<quill-editor :max-size="maxSize" :placeholder="placeholder" @changeInput="changeInput" /> |
|||
</a-form-item> |
|||
|
|||
<a-form-item class="d-flex flex-row-reverse"> |
|||
<a-button @click="$emit('closeModal')" class="mr-3">取消</a-button> |
|||
<a-button class="white--text" html-type="submit" type="primary">保存</a-button> |
|||
</a-form-item> |
|||
</a-form> |
|||
</a-modal> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { addIndustryInfo } from 'config/api'; |
|||
import QuillEditor from 'components/QuillEditor/QuillEditor.vue'; |
|||
|
|||
const formItemLayout = { |
|||
labelCol: { span: 6 }, |
|||
wrapperCol: { span: 16 }, |
|||
}; |
|||
const tailItemLayout = { wrapperCol: { span: 16, offset: 6 } }; |
|||
export default { |
|||
name: 'ActivityAdd', |
|||
props: { visible: { type: Boolean, default: false } }, |
|||
components: { QuillEditor }, |
|||
data() { |
|||
return { |
|||
formItemLayout, |
|||
tailItemLayout, |
|||
form: this.$form.createForm(this, { name: 'activity-add' }), |
|||
maxSize: 2048, |
|||
content: '', |
|||
placeholder: '请输入...', |
|||
time: '', |
|||
}; |
|||
}, |
|||
|
|||
methods: { |
|||
// 举办时间 |
|||
onChange(value, dateString) { |
|||
this.time = dateString; |
|||
}, |
|||
|
|||
// 修改内容 |
|||
changeInput(value) { |
|||
this.content = value; |
|||
}, |
|||
|
|||
// 提交表单 |
|||
handleSubmit(e) { |
|||
e.preventDefault(); |
|||
this.form.validateFieldsAndScroll(async (err, values) => { |
|||
if (!err) { |
|||
try { |
|||
const { content, time } = this; |
|||
const params = { param: values }; |
|||
params.param.time = time; |
|||
params.param.content = content; |
|||
const res = await addIndustryInfo(params); |
|||
const { data, msg, code } = res.data; |
|||
if (code === 200) { |
|||
this.$message.success('添加成功'); |
|||
this.$emit('closeModal'); |
|||
} else { |
|||
this.$emit('closeModal'); |
|||
throw msg; |
|||
} |
|||
} catch (error) { |
|||
this.$message.error(error || '添加失败'); |
|||
} |
|||
} |
|||
}); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped lang="stylus"></style> |
|||
@ -0,0 +1,166 @@ |
|||
<template> |
|||
<div class="main flex-1"> |
|||
<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" |
|||
bordered |
|||
class="white" |
|||
> |
|||
<template slot="id" slot-scope="text, record, index"> |
|||
<span>{{ index + 1 }}</span> |
|||
</template> |
|||
|
|||
<template slot="time" slot-scope="text, record"> |
|||
<span>{{ record.time}}</span> |
|||
</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> |
|||
|
|||
<div slot="expandedRowRender" slot-scope="record" style="margin: 0"> |
|||
<div> |
|||
详情： |
|||
<span v-dompurify-html="record.content"></span> |
|||
</div> |
|||
</div> |
|||
</a-table> |
|||
</div> |
|||
<a-empty v-else /> |
|||
|
|||
<!-- 编辑 --> |
|||
<activity-edit :editItem="editItem" :editVisible="editVisible" @closeModal="closeModal" /> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import ActivityEdit from 'components/IndustryInfo/ActivityEdit.vue'; |
|||
import { deleteIndustryInfo } from 'config/api'; |
|||
|
|||
const columns = [ |
|||
{ |
|||
title: '序号', |
|||
align: 'center', |
|||
dataIndex: 'id', |
|||
key: 'id', |
|||
scopedSlots: { customRender: 'id' }, |
|||
}, |
|||
{ |
|||
title: '标题', |
|||
align: 'center', |
|||
dataIndex: 'title', |
|||
key: 'title', |
|||
}, |
|||
{ |
|||
title: '地点', |
|||
align: 'center', |
|||
dataIndex: 'site', |
|||
key: 'site', |
|||
}, |
|||
{ |
|||
title: '活动时间', |
|||
align: 'center', |
|||
dataIndex: 'time', |
|||
key: 'time', |
|||
scopedSlots: { customRender: 'time' }, |
|||
}, |
|||
{ |
|||
title: '公告简介', |
|||
align: 'center', |
|||
dataIndex: 'description', |
|||
key: 'description', |
|||
}, |
|||
{ |
|||
title: '编辑', |
|||
align: 'center', |
|||
dataIndex: 'edit', |
|||
key: 'edit', |
|||
width: 200, |
|||
scopedSlots: { customRender: 'edit' }, |
|||
}, |
|||
]; |
|||
|
|||
export default { |
|||
name: 'ActivityDate', |
|||
components: { |
|||
ActivityEdit, |
|||
}, |
|||
|
|||
props: { lists: { type: Array, default: () => [] }, pagination: { type: Object, default: () => {} } }, |
|||
|
|||
data() { |
|||
return { |
|||
columns, |
|||
loading: false, |
|||
height: '', |
|||
editVisible: false, |
|||
editItem: null, // 修改的那条 |
|||
}; |
|||
}, |
|||
|
|||
mounted() { |
|||
let th = 250; |
|||
let wh = window.innerHeight; |
|||
this.height = wh - th; |
|||
window.onresize = () => { |
|||
return (() => { |
|||
wh = window.innerHeight; |
|||
this.height = wh - th; |
|||
})(); |
|||
}; |
|||
}, |
|||
|
|||
methods: { |
|||
showEditModal(record) { |
|||
console.log('record: ', record); |
|||
this.editItem = record; |
|||
this.editVisible = true; |
|||
}, |
|||
|
|||
async closeModal() { |
|||
this.editVisible = false; |
|||
await this.$emit('getBackendSearch'); |
|||
}, |
|||
|
|||
handleTableChange(pagination) { |
|||
const { current, pageSize } = pagination; |
|||
const condition = { current, pageSize }; |
|||
this.$emit('getBackendSearch', condition); |
|||
}, |
|||
|
|||
// 删除 |
|||
async onDelete(id) { |
|||
try { |
|||
const params = { param: { id } }; |
|||
const res = await deleteIndustryInfo(params); |
|||
const { data, msg, code } = res.data; |
|||
if (code === 200) { |
|||
this.$message.success('删除成功'); |
|||
this.$emit('getBackendSearch'); |
|||
} else { |
|||
throw msg; |
|||
} |
|||
} catch (error) { |
|||
this.$message.error(error || '删除失败'); |
|||
} |
|||
}, |
|||
|
|||
// 打开报名 |
|||
openSignUp() { |
|||
const { query } = this.$route; |
|||
this.$router.push({ path: '/sign-up', query }); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped lang="stylus"></style> |
|||
@ -0,0 +1,176 @@ |
|||
<template> |
|||
<div class="d-flex flex-wrap pb-3"> |
|||
<!-- 编辑 --> |
|||
<a-modal :closable="false" footer title="修改行业资讯" v-model="editVisible" width="700px"> |
|||
<a-form :form="form" @submit="handleSubmit"> |
|||
<!-- 标题 --> |
|||
<a-form-item |
|||
:label-col="formItemLayout.labelCol" |
|||
:wrapper-col="formItemLayout.wrapperCol" |
|||
label="标题" |
|||
> |
|||
<a-input |
|||
placeholder="标题" |
|||
v-decorator="[ |
|||
'title', |
|||
{ |
|||
initialValue: editItem.title, |
|||
}, |
|||
]" |
|||
/> |
|||
</a-form-item> |
|||
<!-- 地点 --> |
|||
<a-form-item |
|||
:label-col="formItemLayout.labelCol" |
|||
:wrapper-col="formItemLayout.wrapperCol" |
|||
label="地点" |
|||
> |
|||
<a-input |
|||
placeholder="地点" |
|||
v-decorator="[ |
|||
'site', |
|||
{ |
|||
initialValue: editItem.site, |
|||
}, |
|||
]" |
|||
/> |
|||
</a-form-item> |
|||
<!-- 时间 --> |
|||
<a-form-item |
|||
:label-col="formItemLayout.labelCol" |
|||
:wrapper-col="formItemLayout.wrapperCol" |
|||
label="时间" |
|||
> |
|||
<a-date-picker |
|||
:placeholder="editItem.time" |
|||
@change="onChange" |
|||
format="YYYY-MM-DD HH:mm:ss" |
|||
show-time |
|||
/> |
|||
</a-form-item> |
|||
<!-- 发布部门 --> |
|||
<a-form-item |
|||
:label-col="formItemLayout.labelCol" |
|||
:wrapper-col="formItemLayout.wrapperCol" |
|||
label="发布部门" |
|||
> |
|||
<a-input |
|||
placeholder="发布部门" |
|||
v-decorator="[ |
|||
'spreadDepartment', |
|||
{ |
|||
initialValue: editItem.spreadDepartment, |
|||
}, |
|||
]" |
|||
/> |
|||
</a-form-item> |
|||
<!-- 简介 --> |
|||
<a-form-item |
|||
:label-col="formItemLayout.labelCol" |
|||
:wrapper-col="formItemLayout.wrapperCol" |
|||
label="简介" |
|||
> |
|||
<a-textarea |
|||
placeholder="简介" |
|||
v-decorator="[ |
|||
'description', |
|||
{ |
|||
initialValue: editItem.description, |
|||
}, |
|||
]" |
|||
/> |
|||
</a-form-item> |
|||
<!-- 详情 --> |
|||
<a-form-item |
|||
:label-col="formItemLayout.labelCol" |
|||
:wrapper-col="formItemLayout.wrapperCol" |
|||
label="详情" |
|||
> |
|||
<quill-editor |
|||
:max-size="maxSize" |
|||
:value="editItem && (editItem.content ? editItem.content : '')" |
|||
@changeInput="changeInput" |
|||
/> |
|||
</a-form-item> |
|||
|
|||
<a-form-item class="d-flex flex-row-reverse"> |
|||
<a-button @click="$emit('closeModal')" class="mr-3">取消</a-button> |
|||
<a-button class="white--text" html-type="submit" type="primary">保存</a-button> |
|||
</a-form-item> |
|||
</a-form> |
|||
</a-modal> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { updateIndustryInfo } from 'config/api'; |
|||
import QuillEditor from 'components/QuillEditor/QuillEditor.vue'; |
|||
|
|||
const formItemLayout = { |
|||
labelCol: { span: 6 }, |
|||
wrapperCol: { span: 16 }, |
|||
}; |
|||
|
|||
const tailItemLayout = { wrapperCol: { span: 16, offset: 6 } }; |
|||
|
|||
export default { |
|||
name: 'ActivityEdit', |
|||
props: { editVisible: { type: Boolean, default: false }, editItem: { type: Object, default: () => {} } }, |
|||
components: { QuillEditor }, |
|||
data() { |
|||
return { |
|||
formItemLayout, |
|||
tailItemLayout, |
|||
form: this.$form.createForm(this, { name: 'r-d-add' }), |
|||
maxSize: 2048, |
|||
content: '', |
|||
titleCode: '', |
|||
edtiTitleCode: '', |
|||
time: '', |
|||
}; |
|||
}, |
|||
|
|||
methods: { |
|||
// 修改内容 |
|||
changeInput(value) { |
|||
this.content = value; |
|||
}, |
|||
|
|||
// 举办时间 |
|||
onChange(value, dateString) { |
|||
console.log('dateString: ', dateString); |
|||
// this.time = dateString; |
|||
}, |
|||
|
|||
// 提交表单 |
|||
handleSubmit(e) { |
|||
e.preventDefault(); |
|||
this.form.validateFieldsAndScroll(async (err, values) => { |
|||
if (!err) { |
|||
try { |
|||
const { time, content, editItem } = this; |
|||
const params = { param: values }; |
|||
params.param.id = editItem.id; |
|||
params.param.time = time ? time : editItem.time; |
|||
params.param.content = content ? content : editItem.content; |
|||
const res = await updateIndustryInfo(params); |
|||
const { data, msg, code } = res.data; |
|||
if (code === 200) { |
|||
this.$message.success('修改成功'); |
|||
this.$emit('closeModal'); |
|||
this.time = ''; |
|||
this.content = ''; |
|||
} else { |
|||
throw msg; |
|||
} |
|||
} catch (error) { |
|||
this.$message.error(error || '修改失败'); |
|||
} |
|||
} |
|||
}); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped lang="stylus"></style> |
|||
@ -0,0 +1,80 @@ |
|||
<template> |
|||
<div class="d-flex flex-wrap pb-3"> |
|||
<div> |
|||
<!-- 活动标题 --> |
|||
<a-input class="ml-3" placeholder="标题" style="width: 150px" v-model="titleKey" /> |
|||
|
|||
<!-- 地点 --> |
|||
<a-input class="ml-3" placeholder="地点" style="width: 150px" v-model="site" /> |
|||
|
|||
<!-- 发布部门 --> |
|||
<a-input class="ml-3" placeholder="标题" style="width: 150px" v-model="spreadDepartment" /> |
|||
|
|||
<!-- 发布时间 --> |
|||
<a-range-picker @change="onChange" class="ml-3" format="YYYY-MM-DD HH:mm:ss" show-time /> |
|||
|
|||
<a-button @click="handleTableChange" class="mx-2" type="primary">搜索</a-button> |
|||
</div> |
|||
|
|||
<div class="flex-1"></div> |
|||
|
|||
<a-button @click="showModal" class="editable-add-btn" type="primary">增加</a-button> |
|||
|
|||
<!-- 添加 --> |
|||
<activity-add :visible="visible" @closeModal="closeModal" /> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import ActivityAdd from 'components/IndustryInfo/ActivityAdd.vue'; |
|||
|
|||
export default { |
|||
name: 'ActivitySearch', |
|||
components: { |
|||
ActivityAdd, |
|||
}, |
|||
data() { |
|||
return { |
|||
visible: false, |
|||
titleKey: '', |
|||
site: '', |
|||
spreadDepartment: '', |
|||
startTime: '', |
|||
endTime: '', |
|||
}; |
|||
}, |
|||
|
|||
methods: { |
|||
showModal() { |
|||
this.visible = true; |
|||
}, |
|||
|
|||
async closeModal() { |
|||
this.visible = false; |
|||
await this.$emit('getBackendSearch'); |
|||
}, |
|||
|
|||
// 发布时间 |
|||
onChange(dates, dateStrings) { |
|||
this.startTime = dateStrings[0]; |
|||
this.endTime = dateStrings[1]; |
|||
}, |
|||
|
|||
async handleTableChange() { |
|||
const { titleKey, site, spreadDepartment, startTime, endTime } = this; |
|||
// 传参 |
|||
const condition = { |
|||
titleKey, |
|||
site, |
|||
spreadDepartment, |
|||
startTime, |
|||
endTime, |
|||
}; |
|||
await this.$emit('getBackendSearch', condition); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<!-- Add "scoped" attribute to limit CSS to this component only --> |
|||
<style scoped lang="stylus"></style> |
|||
@ -1,20 +1,21 @@ |
|||
<template> |
|||
<div class="pa-3 white fill-height d-flex flex-column"> |
|||
<user-search /> |
|||
<user-date /> |
|||
<!-- <user-search /> |
|||
<user-date />--> |
|||
开发中... ... |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
// @ is an alias to /src |
|||
import UserSearch from "components/User/UserSearch.vue"; |
|||
import UserDate from "components/User/UserDate.vue"; |
|||
import UserSearch from 'components/User/UserSearch.vue'; |
|||
import UserDate from 'components/User/UserDate.vue'; |
|||
|
|||
export default { |
|||
name: "Home", |
|||
name: 'Home', |
|||
components: { |
|||
UserSearch, |
|||
UserDate |
|||
} |
|||
UserDate, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
Loading…
Reference in new issue