22 changed files with 3703 additions and 97 deletions
@ -0,0 +1,281 @@ |
|||
<template> |
|||
<div class="d-flex flex-wrap pb-3"> |
|||
<!-- 添加 --> |
|||
<a-modal |
|||
:maskClosable="false" |
|||
@cancel="$emit('closeModal')" |
|||
destroyOnClose |
|||
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="公司名称" |
|||
required |
|||
> |
|||
<a-auto-complete |
|||
@search="handleSearchTasks" |
|||
@select="onSelect" |
|||
placeholder="公司名称" |
|||
v-model="companyname" |
|||
> |
|||
<template slot="dataSource"> |
|||
<a-select-option |
|||
:key="task.id" |
|||
:value="`${task.id}`" |
|||
v-for="task in dataSource" |
|||
>{{ task.company }}</a-select-option> |
|||
</template> |
|||
</a-auto-complete> |
|||
</a-form-item> |
|||
<!-- 产品名称 --> |
|||
<a-form-item |
|||
:label-col="formItemLayout.labelCol" |
|||
:wrapper-col="formItemLayout.wrapperCol" |
|||
label="产品名称" |
|||
> |
|||
<a-input |
|||
placeholder="产品名称" |
|||
v-decorator="[ |
|||
'name', |
|||
{ |
|||
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="[ |
|||
'identifier' |
|||
]" |
|||
/> |
|||
</a-form-item> |
|||
<!-- 产品图片 --> |
|||
<a-form-item |
|||
:label-col="formItemLayout.labelCol" |
|||
:wrapper-col="formItemLayout.wrapperCol" |
|||
label="产品图片" |
|||
> |
|||
<a-upload |
|||
:action="upload" |
|||
:before-upload="beforeUpload" |
|||
@change="handleChange" |
|||
list-type="picture" |
|||
name="files" |
|||
v-decorator="[ |
|||
'pic', |
|||
{ |
|||
rules: [ |
|||
{ required: true, message: '产品图片不能为空' }, |
|||
], |
|||
}, |
|||
]" |
|||
> |
|||
<a-button v-show="fileList.length - 0 === 0"> |
|||
<a-icon type="upload" />选择图片 |
|||
</a-button> |
|||
</a-upload> |
|||
</a-form-item> |
|||
<!-- 产品类型 --> |
|||
<a-form-item |
|||
:label-col="formItemLayout.labelCol" |
|||
:wrapper-col="formItemLayout.wrapperCol" |
|||
label="产品类型" |
|||
> |
|||
<a-checkbox-group |
|||
v-decorator="[ |
|||
'modelIds', |
|||
{ |
|||
rules: [ |
|||
{ required: true, message: '产品类型不能为空' }, |
|||
], |
|||
}, |
|||
]" |
|||
> |
|||
<a-checkbox |
|||
:key="item.id" |
|||
:value="item.id" |
|||
v-for="item in typeLists.list" |
|||
>{{ item.name }}</a-checkbox> |
|||
</a-checkbox-group> |
|||
</a-form-item> |
|||
<!-- 产品简介 --> |
|||
<a-form-item |
|||
:label-col="formItemLayout.labelCol" |
|||
:wrapper-col="formItemLayout.wrapperCol" |
|||
label="产品简介" |
|||
> |
|||
<a-textarea |
|||
placeholder="产品简介" |
|||
v-decorator="['synopsis',{ |
|||
rules: [ |
|||
{ required: true, message: '产品简介不能为空' }, |
|||
], |
|||
},]" |
|||
/> |
|||
</a-form-item> |
|||
<!-- 产品详情 --> |
|||
<a-form-item |
|||
:label-col="formItemLayout.labelCol" |
|||
:wrapper-col="formItemLayout.wrapperCol" |
|||
label="产品详情" |
|||
required |
|||
> |
|||
<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 { upload, addProduct, queryInfo } from 'config/api'; |
|||
import { mapActions } from 'vuex'; |
|||
import QuillEditor from 'components/QuillEditor/QuillEditor.vue'; |
|||
import debounce from 'lodash/debounce'; |
|||
|
|||
const formItemLayout = { |
|||
labelCol: { span: 6 }, |
|||
wrapperCol: { span: 16 }, |
|||
}; |
|||
const tailItemLayout = { wrapperCol: { span: 16, offset: 6 } }; |
|||
|
|||
export default { |
|||
name: 'InnovativeAdd', |
|||
props: { visible: { type: Boolean, default: false }, typeLists: { type: Object, default: () => {} } }, |
|||
components: { QuillEditor }, |
|||
data() { |
|||
this.handleSearchTasks = debounce(this.handleSearchTasks, 800); |
|||
return { |
|||
formItemLayout, |
|||
tailItemLayout, |
|||
form: this.$form.createForm(this, { name: 'transfer-add' }), |
|||
upload: upload, |
|||
fileList: [], |
|||
//限制文件上传的格式和大小 |
|||
beforeUpload: file => { |
|||
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'; |
|||
if (!isJpgOrPng) { |
|||
this.$message.error('仅支持 JPG/PNG 格式的图片!'); |
|||
} |
|||
return isJpgOrPng; |
|||
}, |
|||
types: [], |
|||
maxSize: 2048, |
|||
details: '', |
|||
placeholder: '请输入...', |
|||
dataSource: [], |
|||
companyname: '', // 公司名称 |
|||
}; |
|||
}, |
|||
|
|||
async created() { |
|||
const params = { |
|||
param: { |
|||
pageNum: 1, |
|||
pageSize: 10, |
|||
model: 2, |
|||
}, |
|||
}; |
|||
this.types = await this.getSelModelSearch(params); |
|||
}, |
|||
|
|||
methods: { |
|||
...mapActions(['getSelModelSearch']), |
|||
|
|||
// 模糊搜索 选择公司信息 |
|||
async handleSearchTasks() { |
|||
try { |
|||
const params = { param: { company: this.companyname } }; |
|||
const res = await queryInfo(params); |
|||
const { code, msg, data } = res.data; |
|||
if (code === 200) { |
|||
this.dataSource = data; |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
} catch (error) { |
|||
console.log(error); |
|||
} |
|||
}, |
|||
onSelect(value) { |
|||
const item = this.dataSource.find(item => item.id === +value); |
|||
this.companyname = item.company; |
|||
}, |
|||
|
|||
// 上传图片 |
|||
handleChange(info) { |
|||
if (info.file.status === 'done') { |
|||
this.fileList.push(info.file.response.data[0].id); |
|||
} else if (info.file.status === 'removed') { |
|||
this.fileList = info.fileList; |
|||
} |
|||
}, |
|||
|
|||
// 修改内容 |
|||
changeInput(value) { |
|||
this.details = value; |
|||
}, |
|||
|
|||
// 提交表单 |
|||
handleSubmit(e) { |
|||
e.preventDefault(); |
|||
this.form.validateFieldsAndScroll(async (err, values) => { |
|||
if (!err) { |
|||
try { |
|||
const { fileList, details, companyname } = this; |
|||
if (!companyname) { |
|||
this.$message.error('请输入公司名称'); |
|||
return; |
|||
} |
|||
if (!details) { |
|||
this.$message.error('请输入产品详情'); |
|||
return; |
|||
} |
|||
const params = { param: values }; |
|||
params.param.pic = fileList[0]; |
|||
params.param.companyname = companyname; |
|||
params.param.details = details; |
|||
const res = await addProduct(params); |
|||
const { data, msg, code } = res.data; |
|||
// 清除新建项目标志数据 |
|||
if (code === 200) { |
|||
this.$message.success('添加成功'); |
|||
this.$emit('handleTableChange'); |
|||
} else { |
|||
throw msg; |
|||
} |
|||
this.$emit('closeModal'); |
|||
} catch (error) { |
|||
this.$emit('closeModal'); |
|||
this.$message.error(error || '添加产品失败'); |
|||
} |
|||
} |
|||
}); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped lang="stylus"></style> |
|||
@ -0,0 +1,220 @@ |
|||
<template> |
|||
<div class="main flex-1"> |
|||
<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> |
|||
|
|||
<div |
|||
class="d-flex flex-nowrap justify-space-between" |
|||
slot="expandedRowRender" |
|||
slot-scope="record" |
|||
style="margin: 0" |
|||
> |
|||
<div> |
|||
<a-spin :spinning="spinning" tip="详情加载中..."> |
|||
产品详情： |
|||
<span v-dompurify-html="record.content" v-if="record.content"></span> |
|||
<span v-else>暂无内容</span> |
|||
</a-spin> |
|||
</div> |
|||
</div> |
|||
</a-table> |
|||
</div> |
|||
<a-empty v-else /> |
|||
|
|||
<!-- 编辑 --> |
|||
<innovative-edit |
|||
:editItem="editItem" |
|||
:editVisible="editVisible" |
|||
:typeLists="typeLists" |
|||
@closeModal="closeModal" |
|||
@handleSelProject="handleSelProject" |
|||
/> |
|||
</a-spin> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import InnovativeEdit from './InnovativeEdit.vue'; |
|||
import { deleteProduct, selProductMesH } from 'config/api'; |
|||
|
|||
const columns = [ |
|||
{ |
|||
title: '序号', |
|||
align: 'center', |
|||
dataIndex: 'id', |
|||
key: 'id', |
|||
width: '7%', |
|||
scopedSlots: { customRender: 'id' }, |
|||
}, |
|||
{ |
|||
title: '编号', |
|||
align: 'center', |
|||
dataIndex: 'identifier', |
|||
key: 'identifier', |
|||
}, |
|||
{ |
|||
title: '产品名称', |
|||
align: 'center', |
|||
dataIndex: 'name', |
|||
key: 'name', |
|||
}, |
|||
{ |
|||
title: '产品简介', |
|||
align: 'center', |
|||
dataIndex: 'synopsis', |
|||
key: 'synopsis', |
|||
}, |
|||
{ |
|||
title: '图片路径', |
|||
align: 'center', |
|||
dataIndex: 'visitLocation', |
|||
key: 'visitLocation', |
|||
scopedSlots: { customRender: 'visitLocation' }, |
|||
}, |
|||
{ |
|||
title: '编辑', |
|||
align: 'center', |
|||
dataIndex: 'edit', |
|||
key: 'edit', |
|||
scopedSlots: { customRender: 'edit' }, |
|||
}, |
|||
]; |
|||
|
|||
export default { |
|||
name: 'InnovativeDate', |
|||
components: { InnovativeEdit }, |
|||
|
|||
props: { |
|||
lists: { type: Array, default: () => [] }, |
|||
pagination: { type: Object, default: () => {} }, |
|||
typeLists: { type: Object, default: () => {} }, |
|||
}, |
|||
|
|||
data() { |
|||
return { |
|||
columns, |
|||
loading: false, |
|||
height: '', |
|||
editVisible: 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) { |
|||
this.showEdit = true; |
|||
const res = await this.getDetail(true, record); |
|||
this.editItem = res; |
|||
this.showEdit = false; |
|||
this.editVisible = true; |
|||
}, |
|||
|
|||
closeModal() { |
|||
this.editVisible = false; |
|||
}, |
|||
|
|||
async handleSelProject() { |
|||
await this.$emit('handleSelProject'); |
|||
}, |
|||
|
|||
handleTableChange(pagination) { |
|||
const { current, pageSize } = pagination; |
|||
const condition = { current, pageSize }; |
|||
this.$emit('handleSelProject', condition); |
|||
}, |
|||
|
|||
// 详情查询 |
|||
async getDetail(expanded, record) { |
|||
if (!expanded) return; |
|||
try { |
|||
this.spinning = true; |
|||
const params = { param: { id: record.id } }; |
|||
const res = await selProductMesH(params); |
|||
const { data, msg, code } = res.data; |
|||
this.spinning = false; |
|||
if (code === 200) { |
|||
const item = this.lists.find(item => item.id === record.id); |
|||
item.content = data.details; |
|||
return data; |
|||
} else { |
|||
throw msg; |
|||
} |
|||
} catch (error) { |
|||
this.$message.error(error || '查询失败'); |
|||
} |
|||
}, |
|||
|
|||
// 删除 |
|||
async onDelete(id) { |
|||
try { |
|||
const params = { param: { id } }; |
|||
const res = await deleteProduct(params); |
|||
const { data, msg, code } = res.data; |
|||
if (code === 200) { |
|||
this.$message.success('删除成功'); |
|||
this.$emit('handleSelProject'); |
|||
} 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,315 @@ |
|||
<template> |
|||
<div class="d-flex flex-wrap pb-3"> |
|||
<!-- 编辑 --> |
|||
<a-modal |
|||
:maskClosable="false" |
|||
@cancel="$emit('closeModal')" |
|||
destroyOnClose |
|||
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="公司名称" |
|||
required |
|||
> |
|||
<a-auto-complete |
|||
@search="handleSearchTasks" |
|||
@select="onSelect" |
|||
placeholder="公司名称" |
|||
v-model="companyname" |
|||
> |
|||
<template slot="dataSource"> |
|||
<a-select-option |
|||
:key="task.id" |
|||
:value="`${task.id}`" |
|||
v-for="task in dataSource" |
|||
>{{ task.company }}</a-select-option> |
|||
</template> |
|||
</a-auto-complete> |
|||
</a-form-item> |
|||
<!-- 产品名称 --> |
|||
<a-form-item |
|||
:label-col="formItemLayout.labelCol" |
|||
:wrapper-col="formItemLayout.wrapperCol" |
|||
label="产品名称" |
|||
> |
|||
<a-input |
|||
placeholder="产品名称" |
|||
v-decorator="[ |
|||
'name', |
|||
{ |
|||
initialValue: editItem ? editItem.name : '', |
|||
}, |
|||
]" |
|||
/> |
|||
</a-form-item> |
|||
<!-- 产品编号 --> |
|||
<a-form-item |
|||
:label-col="formItemLayout.labelCol" |
|||
:wrapper-col="formItemLayout.wrapperCol" |
|||
label="产品编号" |
|||
> |
|||
<a-input |
|||
placeholder="产品编号" |
|||
v-decorator="[ |
|||
'identifier', { initialValue: editItem ? editItem.identifier : '' } |
|||
]" |
|||
/> |
|||
</a-form-item> |
|||
<!-- 产品图片 --> |
|||
<a-form-item |
|||
:label-col="formItemLayout.labelCol" |
|||
:wrapper-col="formItemLayout.wrapperCol" |
|||
label="产品图片" |
|||
> |
|||
<a-upload |
|||
:action="upload" |
|||
:before-upload="beforeUpload" |
|||
@change="handleChange" |
|||
list-type="picture" |
|||
name="files" |
|||
v-decorator="[ |
|||
'pic', |
|||
]" |
|||
> |
|||
<a-button v-show="fileList.length - 0 === 0"> |
|||
<a-icon type="upload" />选择图片 |
|||
</a-button> |
|||
</a-upload> |
|||
</a-form-item> |
|||
<!-- 产品类型 --> |
|||
<a-form-item |
|||
:label-col="formItemLayout.labelCol" |
|||
:wrapper-col="formItemLayout.wrapperCol" |
|||
label="产品类型" |
|||
> |
|||
<a-checkbox-group |
|||
v-decorator="[ |
|||
'modelIds', |
|||
{ |
|||
initialValue: oldTypes ? oldTypes : [], |
|||
}, |
|||
]" |
|||
> |
|||
<a-checkbox |
|||
:key="item.id" |
|||
:value="item.id" |
|||
v-for="item in typeLists.list" |
|||
>{{ item.name }}</a-checkbox> |
|||
</a-checkbox-group> |
|||
</a-form-item> |
|||
<!-- 产品简介 --> |
|||
<a-form-item |
|||
:label-col="formItemLayout.labelCol" |
|||
:wrapper-col="formItemLayout.wrapperCol" |
|||
label="产品简介" |
|||
> |
|||
<a-textarea |
|||
placeholder="产品简介" |
|||
v-decorator="['synopsis',{ |
|||
initialValue: editItem ? editItem.synopsis : '', |
|||
},]" |
|||
/> |
|||
</a-form-item> |
|||
<!-- 产品详情 --> |
|||
<a-form-item |
|||
:label-col="formItemLayout.labelCol" |
|||
:wrapper-col="formItemLayout.wrapperCol" |
|||
label="产品详情" |
|||
required |
|||
> |
|||
<quill-editor |
|||
:max-size="maxSize" |
|||
:placeholder="placeholder" |
|||
:value="details" |
|||
@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 { upload, updateProduct } from 'config/api'; |
|||
import { mapActions } from 'vuex'; |
|||
import QuillEditor from 'components/QuillEditor/QuillEditor.vue'; |
|||
import debounce from 'lodash/debounce'; |
|||
|
|||
const formItemLayout = { |
|||
labelCol: { span: 6 }, |
|||
wrapperCol: { span: 16 }, |
|||
}; |
|||
const tailItemLayout = { wrapperCol: { span: 16, offset: 6 } }; |
|||
|
|||
export default { |
|||
name: 'InnovativeEdit', |
|||
props: { |
|||
editVisible: { type: Boolean, default: false }, |
|||
typeLists: { type: Object, default: () => {} }, |
|||
editItem: { type: Object, default: () => {} }, |
|||
}, |
|||
components: { QuillEditor }, |
|||
data() { |
|||
this.handleSearchTasks = debounce(this.handleSearchTasks, 800); |
|||
return { |
|||
formItemLayout, |
|||
tailItemLayout, |
|||
form: this.$form.createForm(this, { name: 'innovative-edit' }), |
|||
upload: upload, |
|||
fileList: [], |
|||
//限制文件上传的格式和大小 |
|||
beforeUpload: file => { |
|||
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'; |
|||
if (!isJpgOrPng) { |
|||
this.$message.error('仅支持 JPG/PNG 格式的图片!'); |
|||
} |
|||
return isJpgOrPng; |
|||
}, |
|||
types: [], |
|||
maxSize: 2048, |
|||
details: '', |
|||
placeholder: '请输入...', |
|||
dataSource: [], |
|||
companyid: '', // 公司id |
|||
companyname: '', // 公司名称 |
|||
}; |
|||
}, |
|||
|
|||
watch: { |
|||
editItem(val) { |
|||
if (val) { |
|||
if (val.companyid) { |
|||
this.companyid = val.companyid; |
|||
} |
|||
if (val.companyname) { |
|||
this.companyname = val.companyname; |
|||
} |
|||
if (val.details) { |
|||
this.details = val.details; |
|||
} |
|||
} |
|||
}, |
|||
}, |
|||
|
|||
computed: { |
|||
oldTypes() { |
|||
const { typeLists, editItem } = this; |
|||
let arr = []; |
|||
if (editItem && typeLists && typeLists.list && typeLists.list.length) { |
|||
for (let i = 0; i < typeLists.list.length; i++) { |
|||
const item = typeLists.list[i]; |
|||
const a = editItem.names.findIndex(a => a === item.name); |
|||
const index = arr.findIndex(c => c === a); |
|||
if (a !== -1 && index === -1) { |
|||
arr.push(item.id); |
|||
} |
|||
} |
|||
} |
|||
return arr; |
|||
}, |
|||
}, |
|||
|
|||
async created() { |
|||
const params = { |
|||
param: { |
|||
pageNum: 1, |
|||
pageSize: 10, |
|||
model: 2, |
|||
}, |
|||
}; |
|||
this.types = await this.getSelModelSearch(params); |
|||
}, |
|||
|
|||
methods: { |
|||
...mapActions(['getSelModelSearch']), |
|||
|
|||
// 模糊搜索 选择公司信息 |
|||
async handleSearchTasks() { |
|||
try { |
|||
const params = { param: { company: this.companyname } }; |
|||
const res = await queryInfo(params); |
|||
const { code, msg, data } = res.data; |
|||
if (code === 200) { |
|||
this.dataSource = data; |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
} catch (error) { |
|||
console.log(error); |
|||
} |
|||
}, |
|||
onSelect(value) { |
|||
const item = this.dataSource.find(item => item.id === +value); |
|||
this.companyid = item.id; |
|||
this.companyname = item.company; |
|||
}, |
|||
|
|||
// 上传图片 |
|||
handleChange(info) { |
|||
if (info.file.status === 'done') { |
|||
this.fileList.push(info.file.response.data[0].id); |
|||
} else if (info.file.status === 'removed') { |
|||
this.fileList = info.fileList; |
|||
} |
|||
}, |
|||
|
|||
// 修改内容 |
|||
changeInput(value) { |
|||
this.details = value; |
|||
}, |
|||
|
|||
// 提交表单 |
|||
handleSubmit(e) { |
|||
e.preventDefault(); |
|||
this.form.validateFieldsAndScroll(async (err, values) => { |
|||
if (!err) { |
|||
try { |
|||
const { fileList, details, companyid, companyname, editItem } = this; |
|||
if (!companyname) { |
|||
this.$message.error('请输入公司名称'); |
|||
return; |
|||
} |
|||
if (!details) { |
|||
this.$message.error('请输入产品详情'); |
|||
return; |
|||
} |
|||
const params = { param: values }; |
|||
params.param.id = editItem.id; |
|||
params.param.companyid = companyid; |
|||
params.param.companyname = companyname || editItem.companyname; |
|||
params.param.details = details || editItem.details; |
|||
params.param.pic = fileList[0] || editItem.visitLocation; |
|||
const res = await updateProduct(params); |
|||
const { data, msg, code } = res.data; |
|||
// 清除新建项目标志数据 |
|||
if (code === 200) { |
|||
this.$message.success('修改成功'); |
|||
this.$emit('handleSelProject'); |
|||
} else { |
|||
this.$message.error('修改失败'); |
|||
throw msg; |
|||
} |
|||
this.$emit('closeModal'); |
|||
} catch (error) { |
|||
this.$emit('closeModal'); |
|||
this.$message.error(error || '修改失败'); |
|||
} |
|||
} |
|||
}); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped lang="stylus"></style> |
|||
@ -0,0 +1,66 @@ |
|||
<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"></div> |
|||
|
|||
<a-button @click="showModal" class="editable-add-btn" type="primary">增加</a-button> |
|||
|
|||
<!-- 添加 --> |
|||
<innovative-add |
|||
:typeLists="typeLists" |
|||
:visible="visible" |
|||
@closeModal="closeModal" |
|||
@handleTableChange="handleTableChange" |
|||
/> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import InnovativeAdd from './InnovativeAdd.vue'; |
|||
|
|||
export default { |
|||
name: 'TransferSearch', |
|||
components: { InnovativeAdd }, |
|||
props: { typeLists: { type: Object, default: () => {} } }, |
|||
data() { |
|||
return { |
|||
visible: false, |
|||
content: '', |
|||
modelIds: [], |
|||
}; |
|||
}, |
|||
methods: { |
|||
showModal() { |
|||
this.visible = true; |
|||
}, |
|||
|
|||
closeModal() { |
|||
this.visible = false; |
|||
}, |
|||
|
|||
onChange(checkedValues) { |
|||
this.modelIds = checkedValues; |
|||
}, |
|||
|
|||
async handleTableChange() { |
|||
const { content, modelIds } = this; |
|||
// 传参 |
|||
const condition = { |
|||
content, |
|||
modelIds, |
|||
}; |
|||
await this.$emit('handleSelProject', condition); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped lang="stylus"></style> |
|||
@ -0,0 +1,86 @@ |
|||
<template> |
|||
<div class="pa-3 white fill-height d-flex flex-column"> |
|||
<challenge-search @getListData="getListData" /> |
|||
<challenge-date :lists="lists" :pagination="pagination" @getListData="getListData" /> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import ChallengeSearch from './components/ChallengeSearch.vue'; |
|||
import ChallengeDate from './components/ChallengeDate.vue'; |
|||
import { selTelease } from 'config/api'; |
|||
|
|||
export default { |
|||
name: 'Challenge', |
|||
components: { |
|||
ChallengeSearch, |
|||
ChallengeDate, |
|||
}, |
|||
|
|||
data() { |
|||
return { |
|||
str: '需求征集界面', |
|||
lists: {}, |
|||
pagination: { current: 1, pageSize: 10 }, |
|||
pageNum: 1, |
|||
pageSize: 10, |
|||
paramData: { |
|||
title: '', |
|||
companyName: '', |
|||
startTime: '', |
|||
endTime: '', |
|||
servics: '', |
|||
billboardStatus: '', |
|||
}, |
|||
}; |
|||
}, |
|||
|
|||
created() { |
|||
this.getListData(); |
|||
}, |
|||
|
|||
methods: { |
|||
// 获取创业学院内容列表 |
|||
async getListData(condition) { |
|||
try { |
|||
if (condition && condition.current) { |
|||
this.pageNum = condition.current; |
|||
this.pageSize = condition.pageSize; |
|||
} else if (condition && !condition.current) { |
|||
let { paramData } = this; |
|||
console.log(paramData); |
|||
paramData = { ...condition }; |
|||
this.paramData = paramData; |
|||
} |
|||
const params = { |
|||
param: { |
|||
address: '', |
|||
billboardStatus: this.paramData.billboardStatus, |
|||
companyName: this.paramData.companyName, |
|||
startTime: this.paramData.startTime, |
|||
endTime: this.paramData.endTime, |
|||
servics: this.paramData.servics, |
|||
title: this.paramData.title, |
|||
pageNum: this.pageNum, |
|||
pageSize: this.pageSize, |
|||
}, |
|||
}; |
|||
const res = await selTelease(params); |
|||
const { code, msg, data } = res.data; |
|||
if (code === 200) { |
|||
this.lists = data; |
|||
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> |
|||
@ -0,0 +1,278 @@ |
|||
<template> |
|||
<div> |
|||
<a-button @click="showModal" type="primary">增加</a-button> |
|||
<a-modal |
|||
destroy-on-close |
|||
:confirm-loading="confirmLoading" |
|||
:title="title" |
|||
:visible="visible" |
|||
@cancel="handleCancel" |
|||
@ok="handleOk" |
|||
width="50%" |
|||
> |
|||
<a-form :form="form"> |
|||
<!-- 需求名称 --> |
|||
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" class="mb-3" label="需求名称"> |
|||
<a-input placeholder="请输入需求名称..." v-model.trim="platform.needName" /> |
|||
</a-form-item> |
|||
<!-- 公司名称 --> |
|||
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" class="mb-3" label="公司名称"> |
|||
<a-input placeholder="请输入公司名称..." v-model.trim="platform.companyName" /> |
|||
</a-form-item> |
|||
<!-- 技术领域 --> |
|||
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" class="mb-3" label="技术领域"> |
|||
<a-input placeholder="请输入技术领域..." v-model.trim="platform.technicalField" /> |
|||
</a-form-item> |
|||
<!-- 需求截止时间 --> |
|||
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" class="mb-3" label="截止时间"> |
|||
<a-date-picker @change="changeNeedTime" style="width: 100%" /> |
|||
</a-form-item> |
|||
<!-- 需求类别 --> |
|||
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" class="mb-3" label="需求类别"> |
|||
<a-checkbox-group @change="onChange" class="line-height-30"> |
|||
<a-checkbox style="width: 100%" v-for="(item, index) in typeList" :key="index" :value="item.id">{{ item.name }}</a-checkbox> |
|||
</a-checkbox-group> |
|||
</a-form-item> |
|||
<!-- 需求内容 --> |
|||
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" class="mb-3" label="需求内容"> |
|||
<quill-editor |
|||
:options="editorOption" |
|||
@blur="onEditorBlur($event)" |
|||
@change="onEditorChange($event)" |
|||
@focus="onEditorFocus($event)" |
|||
class="editor-box" |
|||
ref="myQuillEditor" |
|||
v-model="needContent" |
|||
></quill-editor> |
|||
<a-upload |
|||
accept="image/png, image/jpeg" |
|||
name="files" |
|||
:multiple="false" |
|||
style="display: none" |
|||
:action="action" |
|||
@change="fileChange" |
|||
> |
|||
<a-button id="upload-img"> <a-icon type="upload" /></a-button> |
|||
</a-upload> |
|||
</a-form-item> |
|||
<!-- 现有基础 --> |
|||
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" class="mb-3" label="现有基础"> |
|||
<a-textarea |
|||
placeholder="（已经开展的工作、所处阶段、投入资金和人力、仪器 设备、生产条件等）" |
|||
style="min-height: 100px" |
|||
v-model.trim="platform.basics" |
|||
/> |
|||
</a-form-item> |
|||
</a-form> |
|||
</a-modal> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import { mapState } from 'vuex'; |
|||
import { quillEditor } from 'vue-quill-editor'; //调用编辑器 |
|||
import 'quill/dist/quill.core.css'; |
|||
import 'quill/dist/quill.snow.css'; |
|||
import 'quill/dist/quill.bubble.css'; |
|||
import { upload, addTelease, findTypeList } from 'config/api'; |
|||
|
|||
const formItemLayout = { |
|||
labelCol: { span: 5 }, |
|||
wrapperCol: { span: 18 }, |
|||
}; |
|||
const formTailLayout = { |
|||
labelCol: { span: 6 }, |
|||
wrapperCol: { span: 18, offset: 6 }, |
|||
}; |
|||
const toolbarOptions = [ |
|||
['bold', 'italic', 'underline', 'strike'], //加粗，斜体，下划线，删除线 |
|||
['blockquote', 'code-block'], //引用，代码块 |
|||
[{ header: 1 }, { header: 2 }], // 标题，键值对的形式；1、2表示字体大小 |
|||
[{ list: 'ordered' }, { list: 'bullet' }], //列表 |
|||
[{ script: 'sub' }, { script: 'super' }], // 上下标 |
|||
[{ indent: '-1' }, { indent: '+1' }], // 缩进 |
|||
[{ direction: 'rtl' }], // 文本方向 |
|||
// [{ size: ['small', false, 'large', 'huge'] }], // 字体大小 |
|||
// [{ header: [1, 2, 3, 4, 5, 6, false] }], //几级标题 |
|||
[{ color: [] }, { background: [] }], // 字体颜色，字体背景颜色 |
|||
// [{ font: [] }], //字体 |
|||
[{ align: [] }], //对齐方式 |
|||
['clean'], //清除字体样式 |
|||
['image', 'video'], //上传图片、上传视频 |
|||
]; |
|||
|
|||
export default { |
|||
name: 'Enroll', |
|||
components: { quillEditor }, |
|||
data() { |
|||
return { |
|||
form: this.$form.createForm(this, { name: 'submit' }), |
|||
visible: false, |
|||
title: '发榜', |
|||
action: upload, |
|||
formItemLayout, |
|||
formTailLayout, |
|||
confirmLoading: false, |
|||
needContent: ``, |
|||
editorOption: { |
|||
placeholder: '在这里输入...', |
|||
modules: { |
|||
toolbar: { |
|||
container: toolbarOptions, // 工具栏 |
|||
handlers: { |
|||
image: function(value) { |
|||
if (value) { |
|||
// alert('自定义图片'); |
|||
document.getElementById('upload-img').click(); |
|||
} else { |
|||
this.quill.format('image', false); |
|||
} |
|||
}, |
|||
video: function(value) { |
|||
if (value) { |
|||
alert('自定义视频'); |
|||
} else { |
|||
this.quill.format('image', false); |
|||
} |
|||
}, |
|||
}, |
|||
}, |
|||
}, |
|||
}, |
|||
platform: { |
|||
needName: '', |
|||
technicalField: '', |
|||
basics: '', |
|||
companyName: '', |
|||
type: [], |
|||
buildTime: '', |
|||
}, |
|||
hideMessage: null, |
|||
typeList: [], |
|||
}; |
|||
}, |
|||
computed: mapState('user', ['anyringToken']), |
|||
created() { |
|||
this.findType(); |
|||
}, |
|||
methods: { |
|||
// 需求截止时间 |
|||
changeNeedTime(date, dateString) { |
|||
this.platform.buildTime = this.$moment(date).format('YYYY-MM-DD HH:mm:ss'); |
|||
// console.log(this.$moment(date).unix(), dateString); |
|||
}, |
|||
|
|||
onEditorReady(editor) { |
|||
// 准备编辑器 |
|||
}, |
|||
onEditorBlur() {}, // 失去焦点事件 |
|||
onEditorFocus() {}, // 获得焦点事件 |
|||
onEditorChange() { |
|||
// 内容改变事件 |
|||
// console.log(this.content); |
|||
}, |
|||
onChange(e) { |
|||
console.log(e); |
|||
this.platform.type = e; |
|||
}, |
|||
// 上传图片事件 |
|||
fileChange(info) { |
|||
console.log(info); |
|||
if (info.file.status === 'uploading') { |
|||
if (!this.hideMessage) { |
|||
this.hideMessage = this.$message.loading('上传中...'); |
|||
} |
|||
} |
|||
// this.fileList = info.fileList; |
|||
if (info.file.status === 'done') { |
|||
this.files = []; |
|||
const img = `<img src=${info.file.response.data[0].visitUrl} >`; |
|||
this.needContent += img; |
|||
setTimeout(this.hideMessage, 0); |
|||
this.$message.success('上传成功'); |
|||
} |
|||
}, |
|||
|
|||
// 显示表单输入框 |
|||
showModal() { |
|||
this.visible = true; |
|||
}, |
|||
// 取消显示 |
|||
handleCancel(e) { |
|||
this.visible = false; |
|||
}, |
|||
// 点击确定 |
|||
handleOk() { |
|||
this.subMitAdd(); |
|||
}, |
|||
// 加入接口 |
|||
async subMitAdd() { |
|||
this.confirmLoading = true; |
|||
try { |
|||
const params = { |
|||
param: { |
|||
address: '123', |
|||
title: this.platform.needName, |
|||
content: this.needContent, |
|||
servics: this.platform.technicalField, |
|||
companyName: this.platform.companyName, |
|||
deadline: this.platform.buildTime, |
|||
existingBasis: this.platform.basics, |
|||
models: this.platform.type, |
|||
}, |
|||
}; |
|||
const res = await addTelease(params); |
|||
const { code, msg, data } = res.data; |
|||
if (code === 200) { |
|||
this.$message.success('添加成功'); |
|||
this.visible = false; |
|||
this.confirmLoading = false; |
|||
for (let key in this.platform) { |
|||
this.platform[key] = ''; |
|||
} |
|||
} else { |
|||
throw msg; |
|||
this.confirmLoading = false; |
|||
} |
|||
} catch (error) { |
|||
this.$message.error(error); |
|||
this.confirmLoading = false; |
|||
} |
|||
}, |
|||
|
|||
// 查询分类列表 |
|||
async findType() { |
|||
try { |
|||
const res = await findTypeList(); |
|||
const { code, msg, data } = res.data; |
|||
if (code === 200) { |
|||
this.typeList = data; |
|||
} else { |
|||
console.log(msg); |
|||
} |
|||
} catch (error) { |
|||
console.log(error); |
|||
} |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="stylus" scoped> |
|||
.must-color { |
|||
color: red; |
|||
} |
|||
|
|||
.code_img { |
|||
height: 32px; |
|||
width: 120px; |
|||
} |
|||
|
|||
.ql-editor { |
|||
min-height: 600px; |
|||
max-height: 800px; |
|||
} |
|||
|
|||
.editor-box >>> .ql-editor { |
|||
min-height: 150px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,225 @@ |
|||
<template> |
|||
<div class="main flex-1"> |
|||
<div style="width: 100%" v-if="lists.list && lists.list.length > 0"> |
|||
<a-table |
|||
:columns="columns" |
|||
:data-source="lists.list" |
|||
:loading="loading" |
|||
:row-key="record => record.id" |
|||
:pagination="pagination" |
|||
:scroll="{ y: height }" |
|||
@change="handleTableChange" |
|||
bordered |
|||
class="white" |
|||
> |
|||
<template slot="id" slot-scope="text, record, index"> |
|||
<span>{{ index + 1 }}</span> |
|||
</template> |
|||
|
|||
<template slot="content" slot-scope="text, record"> |
|||
<div v-dompurify-html="record.content"></div> |
|||
</template> |
|||
|
|||
<template slot="bid" slot-scope="text, record"> |
|||
<span style="cursor: pointer; color: #2db7f5" @click="showList(record)">查看揭榜列表</span> |
|||
</template> |
|||
|
|||
<template slot="billboardStatus" slot-scope="text, record"> |
|||
<a-tag v-if="record.billboardStatus === 0" color="#108ee9"> 待审核 </a-tag> |
|||
<a-tag v-else-if="record.billboardStatus === 1" color="#87d068"> 审核通过 </a-tag> |
|||
<a-tag v-else-if="record.billboardStatus === 2" color="#2db7f5"> 完成 </a-tag> |
|||
<a-tag v-else-if="record.billboardStatus === 3" color="#ccc"> 发榜取消 </a-tag> |
|||
</template> |
|||
|
|||
<template slot="edit" slot-scope="text, record"> |
|||
<a-icon @click="showEditModal(record)" class="pointer" theme="twoTone" type="edit" /> |
|||
<a-tag color="blue" class="ml-3" style="cursor: pointer" @click="changeStatus(record.bid)"> 审核 </a-tag> |
|||
</template> |
|||
</a-table> |
|||
</div> |
|||
<a-empty v-else /> |
|||
<a-modal title="发榜审核" :visible="visible" :confirm-loading="confirmLoading" @ok="handleOk" @cancel="handleCancel" destroy-on-close> |
|||
<a-select style="width: 240px" @change="handleChange"> |
|||
<a-select-option v-for="(item, index) in statusList" :value="index" :key="index"> |
|||
{{ item }} |
|||
</a-select-option> |
|||
</a-select> |
|||
</a-modal> |
|||
<!-- 编辑 --> |
|||
<challenge-edit :edit-visible="editVisible" :edit-data="editData" @getData="getData" :contents="contents" @closeModal="closeModal" /> |
|||
<!-- 揭榜列表 --> |
|||
<unveiling-date :unvu-visible="unvuVisible" :obj-data="objData" @getData="getData" @closeModal1="closeModal1" /> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import ChallengeEdit from './ChallengeEdit.vue'; |
|||
import UnveilingDate from './UnveilingDate.vue'; |
|||
import { academyDelete, upPublished } from 'config/api'; |
|||
const columns = [ |
|||
{ |
|||
title: '序号', |
|||
align: 'center', |
|||
dataIndex: 'id', |
|||
key: 'id', |
|||
width: '7%', |
|||
scopedSlots: { customRender: 'id' }, |
|||
}, |
|||
{ |
|||
title: '标题', |
|||
align: 'center', |
|||
dataIndex: 'title', |
|||
key: 'title', |
|||
}, |
|||
{ |
|||
title: '公司名称', |
|||
align: 'center', |
|||
dataIndex: 'companyName', |
|||
key: 'companyName', |
|||
}, |
|||
// { |
|||
// title: '简介', |
|||
// align: 'center', |
|||
// dataIndex: 'companyName', |
|||
// key: 'companyName', |
|||
// }, |
|||
{ |
|||
title: '需求内容', |
|||
align: 'center', |
|||
dataIndex: 'content', |
|||
key: 'content', |
|||
scopedSlots: { customRender: 'content' }, |
|||
}, |
|||
{ |
|||
title: '截止时间', |
|||
align: 'center', |
|||
dataIndex: 'deadline', |
|||
key: 'deadline', |
|||
// scopedSlots: { customRender: 'picUrl' }, |
|||
}, |
|||
{ |
|||
title: '所属领域', |
|||
align: 'center', |
|||
dataIndex: 'servics', |
|||
key: 'servics', |
|||
scopedSlots: { customRender: 'servics' }, |
|||
}, |
|||
{ |
|||
title: '揭榜列表', |
|||
align: 'center', |
|||
dataIndex: 'bid', |
|||
key: 'bid', |
|||
scopedSlots: { customRender: 'bid' }, |
|||
}, |
|||
{ |
|||
title: '审核状态', |
|||
align: 'center', |
|||
dataIndex: 'billboardStatus', |
|||
key: 'billboardStatus', |
|||
scopedSlots: { customRender: 'billboardStatus' }, |
|||
}, |
|||
{ |
|||
title: '编辑', |
|||
align: 'center', |
|||
dataIndex: 'edit', |
|||
key: 'edit', |
|||
scopedSlots: { customRender: 'edit' }, |
|||
}, |
|||
]; |
|||
|
|||
export default { |
|||
name: 'CollegeDate', |
|||
components: { ChallengeEdit, UnveilingDate }, |
|||
props: { lists: { type: Object, default: () => {} }, pagination: { type: Object, default: () => {} } }, |
|||
|
|||
data() { |
|||
return { |
|||
columns, |
|||
visible: false, |
|||
loading: false, |
|||
confirmLoading: false, |
|||
editingKey: '', |
|||
height: '', |
|||
editVisible: false, |
|||
editData: null, |
|||
contents: '', |
|||
statusList: ['待审核', '审核通过', '完成', '发榜取消'], |
|||
recordId: '', |
|||
recordStatus: '', |
|||
objData: null, |
|||
unvuVisible: 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 handleOk() { |
|||
try { |
|||
this.confirmLoading = true; |
|||
const params = { |
|||
param: { |
|||
id: this.recordId, |
|||
billboardStatus: this.recordStatus, |
|||
}, |
|||
}; |
|||
const res = await upPublished(params); |
|||
const { code, msg, data } = res.data; |
|||
if (code === 200) { |
|||
this.$message.success('修改成功'); |
|||
this.$emit('getListData'); |
|||
this.visible = false; |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
} catch (error) { |
|||
this.$message.error(error); |
|||
} |
|||
this.confirmLoading = false; |
|||
}, |
|||
handleCancel() { |
|||
this.visible = false; |
|||
}, |
|||
handleChange(e) { |
|||
this.recordStatus = e; |
|||
}, |
|||
showEditModal(data) { |
|||
this.editData = data; |
|||
this.editVisible = true; |
|||
}, |
|||
closeModal(data) { |
|||
this.editVisible = data; |
|||
}, |
|||
closeModal1(data) { |
|||
this.unvuVisible = data; |
|||
}, |
|||
handleTableChange(pagination) { |
|||
const { current, pageSize } = pagination; |
|||
const condition = { current, pageSize }; |
|||
this.$emit('getListData', condition); |
|||
}, |
|||
getData() { |
|||
this.$emit('getListData'); |
|||
}, |
|||
changeStatus(id) { |
|||
this.recordId = id; |
|||
this.visible = true; |
|||
}, |
|||
showList(data) { |
|||
this.objData = data; |
|||
this.unvuVisible = true; |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped lang="stylus"></style> |
|||
@ -0,0 +1,321 @@ |
|||
<template> |
|||
<div> |
|||
<a-modal :confirm-loading="confirmLoading" :title="title" :visible="editVisible" @cancel="handleCancel" @ok="handleOk" width="50%"> |
|||
<a-spin v-if="platform.id === ''" /> |
|||
<a-form :form="form" v-else> |
|||
<!-- 需求名称 --> |
|||
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" class="mb-3" label="需求名称"> |
|||
<a-input placeholder="请输入需求名称..." v-model.trim="platform.title" /> |
|||
</a-form-item> |
|||
<!-- 公司名称 --> |
|||
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" class="mb-3" label="公司名称"> |
|||
<a-input placeholder="请输入公司名称..." v-model.trim="platform.companyName" /> |
|||
</a-form-item> |
|||
<!-- 技术领域 --> |
|||
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" class="mb-3" label="技术领域"> |
|||
<a-input placeholder="请输入技术领域..." v-model.trim="platform.servics" /> |
|||
</a-form-item> |
|||
<!-- 需求截止时间 --> |
|||
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" class="mb-3" label="截止时间"> |
|||
<a-date-picker :default-value="$moment(platform.deadline, dateFormat)" @change="changeNeedTime" style="width: 100%" /> |
|||
</a-form-item> |
|||
<!-- 需求类别 --> |
|||
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" class="mb-3" label="需求类别"> |
|||
<a-checkbox-group :default-value="platform.models" @change="onChange" class="line-height-30"> |
|||
<a-checkbox style="width: 100%" v-for="(item, index) in typeList" :key="index" :value="item.id">{{ item.name }}</a-checkbox> |
|||
</a-checkbox-group> |
|||
</a-form-item> |
|||
<!-- 需求内容 --> |
|||
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" class="mb-3" label="需求内容"> |
|||
<quill-editor |
|||
:options="editorOption" |
|||
@blur="onEditorBlur($event)" |
|||
@change="onEditorChange($event)" |
|||
@focus="onEditorFocus($event)" |
|||
class="editor-box" |
|||
ref="myQuillEditor" |
|||
v-model="platform.content" |
|||
></quill-editor> |
|||
<a-upload |
|||
accept="image/png, image/jpeg" |
|||
name="files" |
|||
:multiple="false" |
|||
style="display: none" |
|||
:action="action" |
|||
@change="fileChange" |
|||
> |
|||
<a-button id="upload-img"> <a-icon type="upload" /></a-button> |
|||
</a-upload> |
|||
</a-form-item> |
|||
<!-- 现有基础 --> |
|||
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" class="mb-3" label="现有基础"> |
|||
<a-textarea |
|||
placeholder="（已经开展的工作、所处阶段、投入资金和人力、仪器 设备、生产条件等）" |
|||
style="min-height: 100px" |
|||
v-model.trim="platform.existingBasis" |
|||
/> |
|||
</a-form-item> |
|||
</a-form> |
|||
</a-modal> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import { mapState } from 'vuex'; |
|||
import { quillEditor } from 'vue-quill-editor'; //调用编辑器 |
|||
import 'quill/dist/quill.core.css'; |
|||
import 'quill/dist/quill.snow.css'; |
|||
import 'quill/dist/quill.bubble.css'; |
|||
import { upload, updateTelease, findTypeList, selTeleaseById } from 'config/api'; |
|||
|
|||
const formItemLayout = { |
|||
labelCol: { span: 5 }, |
|||
wrapperCol: { span: 18 }, |
|||
}; |
|||
const formTailLayout = { |
|||
labelCol: { span: 6 }, |
|||
wrapperCol: { span: 18, offset: 6 }, |
|||
}; |
|||
const toolbarOptions = [ |
|||
['bold', 'italic', 'underline', 'strike'], //加粗，斜体，下划线，删除线 |
|||
['blockquote', 'code-block'], //引用，代码块 |
|||
[{ header: 1 }, { header: 2 }], // 标题，键值对的形式；1、2表示字体大小 |
|||
[{ list: 'ordered' }, { list: 'bullet' }], //列表 |
|||
[{ script: 'sub' }, { script: 'super' }], // 上下标 |
|||
[{ indent: '-1' }, { indent: '+1' }], // 缩进 |
|||
[{ direction: 'rtl' }], // 文本方向 |
|||
// [{ size: ['small', false, 'large', 'huge'] }], // 字体大小 |
|||
// [{ header: [1, 2, 3, 4, 5, 6, false] }], //几级标题 |
|||
[{ color: [] }, { background: [] }], // 字体颜色，字体背景颜色 |
|||
// [{ font: [] }], //字体 |
|||
[{ align: [] }], //对齐方式 |
|||
['clean'], //清除字体样式 |
|||
['image', 'video'], //上传图片、上传视频 |
|||
]; |
|||
|
|||
export default { |
|||
name: 'ChallengeEdit', |
|||
components: { quillEditor }, |
|||
props: { |
|||
editVisible: { |
|||
type: Boolean, |
|||
default: false, |
|||
}, |
|||
editData: { |
|||
type: Object, |
|||
default: () => {}, |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
form: this.$form.createForm(this, { name: 'submit' }), |
|||
title: '发榜', |
|||
action: upload, |
|||
formItemLayout, |
|||
formTailLayout, |
|||
confirmLoading: false, |
|||
needContent: ``, |
|||
editorOption: { |
|||
placeholder: '在这里输入...', |
|||
modules: { |
|||
toolbar: { |
|||
container: toolbarOptions, // 工具栏 |
|||
handlers: { |
|||
image: function(value) { |
|||
if (value) { |
|||
// alert('自定义图片'); |
|||
document.getElementById('upload-img').click(); |
|||
} else { |
|||
this.quill.format('image', false); |
|||
} |
|||
}, |
|||
video: function(value) { |
|||
if (value) { |
|||
alert('自定义视频'); |
|||
} else { |
|||
this.quill.format('image', false); |
|||
} |
|||
}, |
|||
}, |
|||
}, |
|||
}, |
|||
}, |
|||
dateFormat: 'YYYY-MM-DD', |
|||
platform: { |
|||
id: '', |
|||
title: '', |
|||
companyName: '', |
|||
content: '', |
|||
servics: '', |
|||
deadline: '', |
|||
existingBasis: '', |
|||
models: [], |
|||
}, |
|||
hideMessage: null, |
|||
typeList: [], |
|||
}; |
|||
}, |
|||
computed: mapState('user', ['anyringToken']), |
|||
watch: { |
|||
editVisible(val) { |
|||
if (val) { |
|||
this.confirmLoading = true; |
|||
this.getDetail(this.editData.bid); |
|||
} |
|||
}, |
|||
}, |
|||
created() { |
|||
this.findType(); |
|||
}, |
|||
methods: { |
|||
// 需求截止时间 |
|||
changeNeedTime(date, dateString) { |
|||
this.platform.buildTime = this.$moment(date).format('YYYY-MM-DD HH:mm:ss'); |
|||
// console.log(this.$moment(date).unix(), dateString); |
|||
}, |
|||
async getDetail(id) { |
|||
try { |
|||
const params = { param: { id } }; |
|||
const res = await selTeleaseById(params); |
|||
const { code, msg, data } = res.data; |
|||
if (code === 200) { |
|||
this.platform.id = data.bid; |
|||
this.platform.title = data.title; |
|||
this.platform.content = data.content; |
|||
this.platform.companyName = data.companyName; |
|||
this.platform.servics = data.servics; |
|||
this.platform.deadline = data.deadline; |
|||
this.platform.existingBasis = data.existingBasis; |
|||
this.platform.models = this.getModelId(data.list); |
|||
console.log(this.platform.models); |
|||
this.confirmLoading = false; |
|||
} else { |
|||
console.log(msg); |
|||
this.confirmLoading = false; |
|||
} |
|||
} catch (error) { |
|||
console.log(error); |
|||
this.confirmLoading = false; |
|||
} |
|||
}, |
|||
getModelId(list) { |
|||
console.log(list); |
|||
this.platform.models = []; |
|||
let idList = []; |
|||
for (var i = 0; i < list.length; i++) { |
|||
idList.push(list[i].moid); |
|||
} |
|||
return idList; |
|||
}, |
|||
onEditorReady(editor) { |
|||
// 准备编辑器 |
|||
}, |
|||
onEditorBlur() {}, // 失去焦点事件 |
|||
onEditorFocus() {}, // 获得焦点事件 |
|||
onEditorChange() { |
|||
// 内容改变事件 |
|||
// console.log(this.content); |
|||
}, |
|||
onChange(e) { |
|||
console.log(e); |
|||
this.platform.models = e; |
|||
}, |
|||
// 上传图片事件 |
|||
fileChange(info) { |
|||
console.log(info); |
|||
if (info.file.status === 'uploading') { |
|||
if (!this.hideMessage) { |
|||
this.hideMessage = this.$message.loading('上传中...'); |
|||
} |
|||
} |
|||
// this.fileList = info.fileList; |
|||
if (info.file.status === 'done') { |
|||
this.files = []; |
|||
const img = `<img src=${info.file.response.data[0].visitUrl} >`; |
|||
this.needContent += img; |
|||
setTimeout(this.hideMessage, 0); |
|||
this.$message.success('上传成功'); |
|||
} |
|||
}, |
|||
// 取消显示 |
|||
handleCancel(e) { |
|||
for (let key in this.platform) { |
|||
this.platform[key] = ''; |
|||
} |
|||
this.$emit('closeModal', false); |
|||
}, |
|||
// 点击确定 |
|||
handleOk() { |
|||
this.subMitAdd(); |
|||
}, |
|||
// 修改接口 |
|||
async subMitAdd() { |
|||
this.confirmLoading = true; |
|||
try { |
|||
const params = { |
|||
param: { |
|||
id: this.platform.id, |
|||
title: this.platform.title, |
|||
content: this.platform.content, |
|||
servics: this.platform.servics, |
|||
deadline: this.platform.deadline, |
|||
existingBasis: this.platform.existingBasis, |
|||
models: this.platform.models, |
|||
}, |
|||
}; |
|||
const res = await updateTelease(params); |
|||
const { code, msg, data } = res.data; |
|||
if (code === 200) { |
|||
this.$message.success('修改成功'); |
|||
this.$emit('getData'); |
|||
this.handleCancel(); |
|||
this.confirmLoading = false; |
|||
for (let key in this.platform) { |
|||
this.platform[key] = ''; |
|||
} |
|||
} else { |
|||
throw msg; |
|||
this.confirmLoading = false; |
|||
} |
|||
} catch (error) { |
|||
this.$message.error(error); |
|||
this.confirmLoading = false; |
|||
} |
|||
}, |
|||
|
|||
// 查询分类列表 |
|||
async findType() { |
|||
try { |
|||
const res = await findTypeList(); |
|||
const { code, msg, data } = res.data; |
|||
if (code === 200) { |
|||
this.typeList = data; |
|||
} else { |
|||
console.log(msg); |
|||
} |
|||
} catch (error) { |
|||
console.log(error); |
|||
} |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="stylus" scoped> |
|||
.must-color { |
|||
color: red; |
|||
} |
|||
|
|||
.code_img { |
|||
height: 32px; |
|||
width: 120px; |
|||
} |
|||
|
|||
.ql-editor { |
|||
min-height: 600px; |
|||
max-height: 800px; |
|||
} |
|||
|
|||
.editor-box >>> .ql-editor { |
|||
min-height: 150px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,104 @@ |
|||
<template> |
|||
<div class="d-flex flex-wrap pb-3"> |
|||
<div> |
|||
<a-input allow-clear placeholder="标题" style="width: 150px" v-model="title" /> |
|||
<a-input |
|||
allow-clear |
|||
class="ml-3 mb-3" |
|||
placeholder="公司名称" |
|||
style="width: 150px" |
|||
v-model="companyName" |
|||
/> |
|||
<span class="ml-3">截止时间:</span> |
|||
<a-range-picker @change="onChange" allow-clear class="ml-3 mb-3" /> |
|||
<br /> |
|||
<a-input allow-clear placeholder="所属领域" style="width: 150px" v-model="servics" /> |
|||
<span class="ml-3">审核状态:</span> |
|||
<a-select |
|||
@change="handleChangeSelect" |
|||
allow-clear |
|||
class="ml-3" |
|||
placeholder="状态" |
|||
style="width: 150px" |
|||
> |
|||
<a-select-option :key="item" :value="index" v-for="(item, index) in statusList">{{ item }}</a-select-option> |
|||
</a-select> |
|||
|
|||
<a-button @click="handleTableChange" class="mx-2" type="primary">搜索</a-button> |
|||
</div> |
|||
|
|||
<div class="flex-1"></div> |
|||
<!-- <a-button type="primary" @click="showModal" class="editable-add-btn">增加</a-button> --> |
|||
<!-- 添加 --> |
|||
<challenge-add :visible="visible" @handleTableChange="handleTableChange" /> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import ChallengeAdd from './ChallengeAdd.vue'; |
|||
import { queryMold } from 'config/api'; |
|||
|
|||
export default { |
|||
name: 'CollegeSearch', |
|||
components: { ChallengeAdd }, |
|||
data() { |
|||
return { |
|||
visible: false, |
|||
title: '', |
|||
statusList: ['待审核', '审核通过', '完成', '发榜取消'], |
|||
companyName: '', |
|||
startTime: '', |
|||
endTime: '', |
|||
servics: '', |
|||
billboardStatus: '', |
|||
}; |
|||
}, |
|||
created() { |
|||
this.getQueryMold(); |
|||
}, |
|||
methods: { |
|||
onChange(e) { |
|||
console.log(this.$moment(e[0]._d).format('YYYY-MM-DD HH:mm:ss')); |
|||
console.log(this.$moment(e[1]._d).format('YYYY-MM-DD HH:mm:ss')); |
|||
this.startTime = this.$moment(e[0]._d).format('YYYY-MM-DD HH:mm:ss'); |
|||
this.endTime = this.$moment(e[1]._d).format('YYYY-MM-DD HH:mm:ss'); |
|||
}, |
|||
|
|||
showModal() { |
|||
this.visible = true; |
|||
}, |
|||
|
|||
closeModal() { |
|||
this.visible = false; |
|||
}, |
|||
|
|||
handleChangeSelect(e) { |
|||
// console.log(e); |
|||
this.billboardStatus = e; |
|||
}, |
|||
|
|||
async handleTableChange() { |
|||
const { title, companyName, startTime, endTime, servics, billboardStatus } = this; |
|||
// 传参 |
|||
const condition = { title, companyName, startTime, endTime, servics, billboardStatus }; |
|||
await this.$emit('getListData', condition); |
|||
}, |
|||
async getQueryMold() { |
|||
try { |
|||
const res = await queryMold(); |
|||
const { code, msg, data } = res.data; |
|||
if (code === 200) { |
|||
this.bannersList = data; |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
} catch (error) { |
|||
this.$message.error(error); |
|||
} |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<!-- Add "scoped" attribute to limit CSS to this component only --> |
|||
<style scoped lang="stylus"></style> |
|||
@ -0,0 +1,44 @@ |
|||
<template> |
|||
<div class="d-flex flex-wrap pb-3"> |
|||
<div> |
|||
<a-input placeholder="揭榜人" style="width: 150px" v-model="accepterName" allow-clear /> |
|||
<span class="ml-3"> 揭榜状态:</span> |
|||
<a-select @change="handleChangeSelect" class="ml-3" style="width: 150px" placeholder="状态" allow-clear> |
|||
<a-select-option :key="item" :value="index" v-for="(item, index) in statusList">{{ item }}</a-select-option> |
|||
</a-select> |
|||
|
|||
<a-button @click="handleTableChange" class="mx-2" type="primary">搜索</a-button> |
|||
</div> |
|||
|
|||
<div class="flex-1"></div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'UnveSearch', |
|||
data() { |
|||
return { |
|||
visible: false, |
|||
title: '', |
|||
statusList: ['待审核', '成功', '未成功'], |
|||
orderStatus: '', |
|||
accepterName: '', |
|||
}; |
|||
}, |
|||
methods: { |
|||
handleChangeSelect(e) { |
|||
this.orderStatus = e; |
|||
}, |
|||
handleTableChange() { |
|||
const { orderStatus, accepterName } = this; |
|||
// 传参 |
|||
const condition = { orderStatus, accepterName }; |
|||
this.$emit('getData', condition); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<!-- Add "scoped" attribute to limit CSS to this component only --> |
|||
<style scoped lang="stylus"></style> |
|||
@ -0,0 +1,251 @@ |
|||
<template> |
|||
<div> |
|||
<a-modal |
|||
:footer="false" |
|||
:confirm-loading="confirmLoading" |
|||
:title="title" |
|||
:visible="unvuVisible" |
|||
@cancel="handleCancel" |
|||
@ok="handleOk" |
|||
width="80%" |
|||
> |
|||
<unve-search @getData="getData" /> |
|||
<a-table |
|||
:columns="columns" |
|||
:data-source="dataList" |
|||
:loading="loading" |
|||
:row-key="record => record.id" |
|||
:pagination="pagination" |
|||
@change="handleTableChange" |
|||
bordered |
|||
class="white" |
|||
> |
|||
<template slot="id" slot-scope="text, record, index"> |
|||
<span>{{ index + 1 }}</span> |
|||
</template> |
|||
<template slot="orderStatus" slot-scope="text, record"> |
|||
<div style="width: 120px; text-align: center; margin: auto" v-if="!record.editable"> |
|||
<span v-if="record.orderStatus === 0">待审核</span> |
|||
<span v-else-if="record.orderStatus === 1">成功</span> |
|||
<span v-else-if="record.orderStatus === 2">未成功</span> |
|||
</div> |
|||
<div v-else> |
|||
<a-select style="width: 120px" @change="changeRecord"> |
|||
<a-select-option v-for="(item, index) in statusList" :key="index" :value="index"> |
|||
{{ item }} |
|||
</a-select-option> |
|||
</a-select> |
|||
</div> |
|||
</template> |
|||
<template slot="edit" slot-scope="text, record, index"> |
|||
<a-icon v-if="!record.editable" @click="changeStatus(record, index)" class="pointer" theme="twoTone" type="edit" /> |
|||
<span v-else> |
|||
<a @click="saveStatus(index)">保存</a> |
|||
<a class="ml-3" @click="changeStatus(record.id, index)">取消</a> |
|||
</span> |
|||
</template> |
|||
</a-table> |
|||
</a-modal> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import { mapState } from 'vuex'; |
|||
import UnveSearch from './UnveSearch.vue'; |
|||
import { selfulUnveiling, upUnveiling } from 'config/api'; |
|||
|
|||
const columns = [ |
|||
{ |
|||
title: '序号', |
|||
align: 'center', |
|||
dataIndex: 'id', |
|||
key: 'id', |
|||
width: '7%', |
|||
scopedSlots: { customRender: 'id' }, |
|||
}, |
|||
{ |
|||
title: '揭榜人', |
|||
align: 'center', |
|||
dataIndex: 'accepterName', |
|||
key: 'accepterName', |
|||
}, |
|||
{ |
|||
title: '揭榜单位', |
|||
align: 'center', |
|||
dataIndex: 'unit', |
|||
key: 'unit', |
|||
}, |
|||
{ |
|||
title: '手机号', |
|||
align: 'center', |
|||
dataIndex: 'phone', |
|||
key: 'phone', |
|||
}, |
|||
{ |
|||
title: '时间', |
|||
align: 'center', |
|||
dataIndex: 'times', |
|||
key: 'times', |
|||
}, |
|||
{ |
|||
title: '方案简述', |
|||
align: 'center', |
|||
dataIndex: 'planIntro', |
|||
key: 'planIntro', |
|||
}, |
|||
{ |
|||
title: '揭榜状态', |
|||
align: 'center', |
|||
dataIndex: 'orderStatus', |
|||
key: 'orderStatus', |
|||
scopedSlots: { customRender: 'orderStatus' }, |
|||
}, |
|||
{ |
|||
title: '操作', |
|||
align: 'center', |
|||
dataIndex: 'edit', |
|||
key: 'edit', |
|||
width: '15%', |
|||
scopedSlots: { customRender: 'edit' }, |
|||
}, |
|||
]; |
|||
|
|||
export default { |
|||
name: 'UnveilingDate', |
|||
components: { UnveSearch }, |
|||
props: { |
|||
unvuVisible: { |
|||
type: Boolean, |
|||
default: false, |
|||
}, |
|||
objData: { |
|||
type: Object, |
|||
default: () => {}, |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
title: '发榜', |
|||
confirmLoading: false, |
|||
loading: false, |
|||
columns: columns, |
|||
pagination: { current: 1, pageSize: 10 }, |
|||
billboardId: '', |
|||
orderStatus: '', |
|||
accepterName: '', |
|||
pageNum: 1, |
|||
pageSize: 10, |
|||
dataList: [], |
|||
statusList: ['待审核', '成功', '未成功'], |
|||
status: '', |
|||
id: '', |
|||
}; |
|||
}, |
|||
watch: { |
|||
objData(val) { |
|||
if (val.bid) { |
|||
this.getData(); |
|||
} |
|||
}, |
|||
}, |
|||
methods: { |
|||
handleCancel() { |
|||
this.$emit('closeModal1', false); |
|||
}, |
|||
handleOk() { |
|||
this.$emit('closeModal1', false); |
|||
}, |
|||
async getData(condition) { |
|||
try { |
|||
if (condition && condition.current) { |
|||
this.pageNum = condition.current; |
|||
this.pageSize = condition.pageSize; |
|||
} else if (condition) { |
|||
this.orderStatus = condition.orderStatus; |
|||
this.accepterName = condition.accepterName; |
|||
this.pageNum = 1; |
|||
this.pageSize = 10; |
|||
} |
|||
const params = { |
|||
param: { |
|||
accepterName: this.accepterName, |
|||
billboardId: this.objData.bid, |
|||
orderStatus: this.orderStatus, |
|||
pageNum: this.pageNum, |
|||
pageSize: this.pageSize, |
|||
}, |
|||
}; |
|||
const res = await selfulUnveiling(params); |
|||
const { code, msg, data } = res.data; |
|||
if (code === 200) { |
|||
this.dataList = data.list; |
|||
for (let i = 0; i < this.dataList.length; i++) { |
|||
this.dataList.editable = true; |
|||
} |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
} catch (error) { |
|||
this.$message.error(error); |
|||
} |
|||
}, |
|||
handleTableChange(pagination) { |
|||
const { current, pageSize } = pagination; |
|||
const condition = { current, pageSize }; |
|||
this.getData(); |
|||
}, |
|||
changeStatus(data, index) { |
|||
const newDataList = [...this.dataList]; |
|||
newDataList[index].editable = !newDataList[index].editable; |
|||
this.dataList = newDataList; |
|||
this.status = data.orderStatus; |
|||
this.id = data.id; |
|||
}, |
|||
changeRecord(e) { |
|||
this.status = e; |
|||
}, |
|||
async saveStatus(index) { |
|||
try { |
|||
const params = { |
|||
param: { |
|||
id: this.id, |
|||
orderStatus: this.status, |
|||
}, |
|||
}; |
|||
const res = await upUnveiling(params); |
|||
const { code, msg, data } = res.data; |
|||
if (code === 200) { |
|||
this.$message.success('修改成功'); |
|||
const newDataList = [...this.dataList]; |
|||
newDataList[index].editable = !newDataList[index].editable; |
|||
this.dataList = newDataList; |
|||
this.getData(); |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
} catch (error) { |
|||
this.$message.error(error); |
|||
} |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="stylus" scoped> |
|||
.must-color { |
|||
color: red; |
|||
} |
|||
|
|||
.code_img { |
|||
height: 32px; |
|||
width: 120px; |
|||
} |
|||
|
|||
.ql-editor { |
|||
min-height: 600px; |
|||
max-height: 800px; |
|||
} |
|||
|
|||
.editor-box >>> .ql-editor { |
|||
min-height: 150px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,107 @@ |
|||
<template> |
|||
<div class="pa-3 white fill-height d-flex flex-column"> |
|||
<innovative-search :type-lists="typeLists" @handleSelProject="handleSelProject" /> |
|||
<innovative-date |
|||
:lists="lists" |
|||
:pagination="pagination" |
|||
:type-lists="typeLists" |
|||
@handleSelProject="handleSelProject" |
|||
/> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import InnovativeSearch from 'components/Innovative/InnovativeSearch.vue'; |
|||
import InnovativeDate from 'components/Innovative/InnovativeDate.vue'; |
|||
import { selProduct } from 'config/api'; |
|||
import { mapActions } from 'vuex'; |
|||
|
|||
export default { |
|||
name: 'InnovativeProject', |
|||
components: { |
|||
InnovativeSearch, |
|||
InnovativeDate, |
|||
}, |
|||
|
|||
data() { |
|||
return { |
|||
lists: [], |
|||
pagination: { current: 1, pageSize: 10 }, |
|||
typeLists: {}, |
|||
}; |
|||
}, |
|||
|
|||
async created() { |
|||
await this.selModelSearch(); |
|||
await this.handleSelProject(); |
|||
}, |
|||
|
|||
methods: { |
|||
...mapActions(['getSelModelSearch']), |
|||
/** |
|||
* 获取分类管理列表 |
|||
* @param { Number } model 类型 0成果 1仪器 2实验室 3产品 |
|||
* @param { String } name 分类名称 |
|||
*/ |
|||
async selModelSearch(condition) { |
|||
try { |
|||
const params = { |
|||
param: { |
|||
pageNum: (condition && condition.current) || 1, |
|||
pageSize: (condition && condition.pageSize) || 10, |
|||
model: 3, |
|||
}, |
|||
}; |
|||
console.log('获取产品分类'); |
|||
if (condition) { |
|||
if (condition.name) { |
|||
params.param.name = condition.name; |
|||
} |
|||
} |
|||
const res = await this.getSelModelSearch(params); |
|||
this.typeLists = res; |
|||
} catch (error) { |
|||
console.log('error: ', error); |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* 获取仪器 |
|||
* @param { Array } modelIds 类型 0成果 1仪器 2实验室 |
|||
* @param { String } name 分类名称 |
|||
*/ |
|||
async handleSelProject(condition) { |
|||
try { |
|||
const params = { |
|||
param: { |
|||
pageNum: (condition && condition.current) || 1, |
|||
pageSize: (condition && condition.pageSize) || 10, |
|||
}, |
|||
}; |
|||
if (condition) { |
|||
if (condition.content) { |
|||
params.param.content = condition.content; |
|||
} |
|||
if (condition.modelIds) { |
|||
params.param.modelIds = condition.modelIds; |
|||
} |
|||
} |
|||
const res = await selProduct(params); |
|||
const { code, msg, data } = res.data; |
|||
if (code === 200) { |
|||
this.lists = data.list; |
|||
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> |
|||
@ -0,0 +1,711 @@ |
|||
<template> |
|||
<div class="pa-3 white fill-height d-flex flex-column"> |
|||
<!-- 搜索 --> |
|||
<div class="d-flex flex-wrap pb-3"> |
|||
<div> |
|||
<span class="mr-4">人才姓名:</span> |
|||
<a-input placeholder="人才姓名" style="width: 150px" v-model="teacherName" /> |
|||
<span class="ml-4 mr-4">人才分类:</span> |
|||
<a-select |
|||
@change="typeChange($event, 0)" |
|||
mode="multiple" |
|||
placeholder="人才分类" |
|||
style="width: 400px" |
|||
> |
|||
<a-select-option |
|||
:key="item.id" |
|||
:value="item.id" |
|||
v-for="item in typeList" |
|||
>{{ item.categoryName }}</a-select-option> |
|||
</a-select> |
|||
|
|||
<a-button @click="selModelSearch" class="ml-3" type="primary">搜索</a-button> |
|||
</div> |
|||
<div class="flex-1"></div> |
|||
<a-button |
|||
@click="visible = true" |
|||
class="editable-add-btn" |
|||
style="margin-top: 1px" |
|||
type="primary" |
|||
>增加</a-button> |
|||
</div> |
|||
<!-- 添加表单 --> |
|||
<a-modal |
|||
:mask-closable="false" |
|||
@ok="addTeacherData" |
|||
destroy-on-close |
|||
title="添加人才" |
|||
v-model="visible" |
|||
width="700px" |
|||
> |
|||
<a-form :form="form"> |
|||
<!-- 公司名称 --> |
|||
<a-form-item |
|||
:label-col="formItemLayout.labelCol" |
|||
:wrapper-col="formItemLayout.wrapperCol" |
|||
label="公司名称" |
|||
> |
|||
<a-input placeholder="所在公司名称" v-model="addData.company" /> |
|||
</a-form-item> |
|||
<!-- 职务/职称 --> |
|||
<a-form-item |
|||
:label-col="formItemLayout.labelCol" |
|||
:wrapper-col="formItemLayout.wrapperCol" |
|||
label="职务/职称" |
|||
> |
|||
<a-input placeholder="职务/职称" v-model="addData.duties" /> |
|||
</a-form-item> |
|||
<!-- 人才姓名 --> |
|||
<a-form-item |
|||
:label-col="formItemLayout.labelCol" |
|||
:wrapper-col="formItemLayout.wrapperCol" |
|||
label="人才姓名" |
|||
> |
|||
<a-input placeholder="人才姓名" v-model="addData.name" /> |
|||
</a-form-item> |
|||
<!-- 人才性别 --> |
|||
<a-form-item |
|||
:label-col="formItemLayout.labelCol" |
|||
:wrapper-col="formItemLayout.wrapperCol" |
|||
label="人才性别" |
|||
> |
|||
<a-radio-group :default-value="0" @change="changeAddSex"> |
|||
<a-radio :value="0">女</a-radio> |
|||
<a-radio :value="1">男</a-radio> |
|||
</a-radio-group> |
|||
</a-form-item> |
|||
<!-- 人才照片 --> |
|||
<a-form-item |
|||
:label-col="formItemLayout.labelCol" |
|||
:wrapper-col="formItemLayout.wrapperCol" |
|||
label="人才照片" |
|||
> |
|||
<a-upload |
|||
:action="upload" |
|||
:before-upload="beforeUpload" |
|||
@change="handleChange($event, 1)" |
|||
list-type="picture" |
|||
name="files" |
|||
> |
|||
<a-button v-show="fileList.length - 0 === 0"> |
|||
<a-icon type="upload" />选择图片 |
|||
</a-button> |
|||
</a-upload> |
|||
</a-form-item> |
|||
<!-- 人才简介 --> |
|||
<a-form-item |
|||
:label-col="formItemLayout.labelCol" |
|||
:wrapper-col="formItemLayout.wrapperCol" |
|||
label="人才简介" |
|||
> |
|||
<a-textarea placeholder="人才简介" style="height: 100px" v-model="addData.intro" /> |
|||
</a-form-item> |
|||
<!-- 服务案例 --> |
|||
<a-form-item |
|||
:label-col="formItemLayout.labelCol" |
|||
:wrapper-col="formItemLayout.wrapperCol" |
|||
label="服务案例" |
|||
> |
|||
<a-textarea placeholder="服务案例" style="height: 100px" v-model="addData.serviceCase" /> |
|||
</a-form-item> |
|||
<!-- 人才分类 --> |
|||
<a-form-item |
|||
:label-col="formItemLayout.labelCol" |
|||
:wrapper-col="formItemLayout.wrapperCol" |
|||
label="人才分类" |
|||
> |
|||
<a-select |
|||
@change="typeChange($event, 1)" |
|||
mode="multiple" |
|||
placeholder="人才分类" |
|||
style="width: 100%" |
|||
> |
|||
<a-select-option |
|||
:key="item.id" |
|||
:value="item.id" |
|||
v-for="item in typeList" |
|||
>{{ item.categoryName }}</a-select-option> |
|||
</a-select> |
|||
</a-form-item> |
|||
<!-- 人才聘书 --> |
|||
<a-form-item |
|||
:label-col="formItemLayout.labelCol" |
|||
:wrapper-col="formItemLayout.wrapperCol" |
|||
label="人才聘书" |
|||
> |
|||
<a-upload |
|||
:action="upload" |
|||
:before-upload="beforeUpload1" |
|||
@change="handleChange($event, 2)" |
|||
list-type="picture" |
|||
name="files" |
|||
> |
|||
<a-button v-show="fileList1.length - 0 === 0"> |
|||
<a-icon type="upload" />选择图片 |
|||
</a-button> |
|||
</a-upload> |
|||
</a-form-item> |
|||
<!-- 人才简历 --> |
|||
<a-form-item |
|||
:label-col="formItemLayout.labelCol" |
|||
:wrapper-col="formItemLayout.wrapperCol" |
|||
label="人才简历" |
|||
> |
|||
<a-upload |
|||
:action="upload" |
|||
:before-upload="beforeUpload2" |
|||
@change="handleChange($event, 3)" |
|||
list-type="picture" |
|||
name="files" |
|||
> |
|||
<a-button v-show="fileList2.length - 0 === 0"> |
|||
<a-icon type="upload" />选择图片 |
|||
</a-button> |
|||
</a-upload> |
|||
</a-form-item> |
|||
</a-form> |
|||
</a-modal> |
|||
<!-- 表格 --> |
|||
<div class="main flex-1"> |
|||
<div style="width: 100%" v-if="lists.list && lists.list.length > 0"> |
|||
<a-table |
|||
:columns="columns" |
|||
:data-source="lists.list" |
|||
: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="sex" slot-scope="text, record"> |
|||
<span v-if="record.sex === 0">女</span> |
|||
<span v-else>男</span> |
|||
</template> |
|||
<template slot="teacherPhoto" slot-scope="text, record"> |
|||
<img :src="record.teacherPhoto" style="width: 100%" v-if="record.teacherPhoto" /> |
|||
</template> |
|||
<template slot="resume" slot-scope="text, record"> |
|||
<img :src="record.resume" style="width: 100%" v-if="record.resume" /> |
|||
</template> |
|||
<template slot="offer" slot-scope="text, record"> |
|||
<img :src="record.offer" style="width: 100%" v-if="record.offer" /> |
|||
</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.list.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> |
|||
<!-- 修改表单 --> |
|||
<a-modal |
|||
:mask-closable="false" |
|||
@ok="editTeacherData" |
|||
destroy-on-close |
|||
title="修改" |
|||
v-model="visible1" |
|||
width="700px" |
|||
> |
|||
<a-form :form="form"> |
|||
<!-- 公司名称 --> |
|||
<a-form-item |
|||
:label-col="formItemLayout.labelCol" |
|||
:wrapper-col="formItemLayout.wrapperCol" |
|||
label="公司名称" |
|||
> |
|||
<a-input placeholder="所在公司名称" v-model="editData.company" /> |
|||
</a-form-item> |
|||
<!-- 职务/职称 --> |
|||
<a-form-item |
|||
:label-col="formItemLayout.labelCol" |
|||
:wrapper-col="formItemLayout.wrapperCol" |
|||
label="职务/职称" |
|||
> |
|||
<a-input placeholder="职务/职称" v-model="editData.duties" /> |
|||
</a-form-item> |
|||
<!-- 人才姓名 --> |
|||
<a-form-item |
|||
:label-col="formItemLayout.labelCol" |
|||
:wrapper-col="formItemLayout.wrapperCol" |
|||
label="人才姓名" |
|||
> |
|||
<a-input placeholder="人才姓名" v-model="editData.name" /> |
|||
</a-form-item> |
|||
<!-- 人才性别 --> |
|||
<a-form-item |
|||
:label-col="formItemLayout.labelCol" |
|||
:wrapper-col="formItemLayout.wrapperCol" |
|||
label="人才性别" |
|||
> |
|||
<a-radio-group :default-value="editData.sex" @change="changeAddSex"> |
|||
<a-radio :value="0">女</a-radio> |
|||
<a-radio :value="1">男</a-radio> |
|||
</a-radio-group> |
|||
</a-form-item> |
|||
<!-- 人才照片 --> |
|||
<a-form-item |
|||
:label-col="formItemLayout.labelCol" |
|||
:wrapper-col="formItemLayout.wrapperCol" |
|||
label="人才照片" |
|||
> |
|||
<a-upload :action="upload" @change="handleChange($event, 4)" name="files"> |
|||
<a-button v-if="!editData.teacherPhoto"> |
|||
<a-icon type="upload" />选择图片 |
|||
</a-button> |
|||
<img |
|||
:src="editData.teacherPhoto" |
|||
style="width: 100%; cursor: pointer" |
|||
title="重新选择" |
|||
v-else |
|||
/> |
|||
<div slot="listType"></div> |
|||
</a-upload> |
|||
</a-form-item> |
|||
<!-- 人才简介 --> |
|||
<a-form-item |
|||
:label-col="formItemLayout.labelCol" |
|||
:wrapper-col="formItemLayout.wrapperCol" |
|||
label="人才简介" |
|||
> |
|||
<a-textarea placeholder="人才简介" style="height: 100px" v-model="editData.intro" /> |
|||
</a-form-item> |
|||
<!-- 服务案例 --> |
|||
<a-form-item |
|||
:label-col="formItemLayout.labelCol" |
|||
:wrapper-col="formItemLayout.wrapperCol" |
|||
label="服务案例" |
|||
> |
|||
<a-textarea placeholder="服务案例" style="height: 100px" v-model="editData.serviceCase" /> |
|||
</a-form-item> |
|||
<!-- 人才分类 --> |
|||
<a-form-item |
|||
:label-col="formItemLayout.labelCol" |
|||
:wrapper-col="formItemLayout.wrapperCol" |
|||
label="人才分类" |
|||
> |
|||
<a-select |
|||
:default-value="editData.categoryList" |
|||
@change="typeChange($event, 2)" |
|||
mode="multiple" |
|||
placeholder="人才分类" |
|||
style="width: 100%" |
|||
> |
|||
<a-select-option |
|||
:key="item.id" |
|||
:value="item.id" |
|||
v-for="item in typeList" |
|||
>{{ item.categoryName }}</a-select-option> |
|||
</a-select> |
|||
</a-form-item> |
|||
<!-- 人才聘书 --> |
|||
<a-form-item |
|||
:label-col="formItemLayout.labelCol" |
|||
:wrapper-col="formItemLayout.wrapperCol" |
|||
label="人才聘书" |
|||
> |
|||
<a-upload :action="upload" @change="handleChange($event, 5)" name="files"> |
|||
<a-button v-if="!editData.offer"> |
|||
<a-icon type="upload" />选择图片 |
|||
</a-button> |
|||
<img :src="editData.offer" style="width: 100%; cursor: pointer" title="重新选择" v-else /> |
|||
<div slot="listType"></div> |
|||
</a-upload> |
|||
</a-form-item> |
|||
<!-- 人才简历 --> |
|||
<a-form-item |
|||
:label-col="formItemLayout.labelCol" |
|||
:wrapper-col="formItemLayout.wrapperCol" |
|||
label="人才简历" |
|||
> |
|||
<a-upload :action="upload" @change="handleChange($event, 6)" name="files"> |
|||
<a-button v-if="!editData.resume"> |
|||
<a-icon type="upload" />选择图片 |
|||
</a-button> |
|||
<img :src="editData.resume" style="width: 100%; cursor: pointer" title="重新选择" v-else /> |
|||
<div slot="listType"></div> |
|||
</a-upload> |
|||
</a-form-item> |
|||
</a-form> |
|||
</a-modal> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { upload, getFindTeachH, getSelTutorH, delTeacher, addTeacher, upTeacher } from 'config/api'; |
|||
const formItemLayout = { |
|||
labelCol: { span: 6 }, |
|||
wrapperCol: { span: 16 }, |
|||
}; |
|||
const tailItemLayout = { wrapperCol: { span: 16, offset: 6 } }; |
|||
const columns = [ |
|||
{ |
|||
title: '序号', |
|||
align: 'center', |
|||
dataIndex: 'id', |
|||
key: 'id', |
|||
width: '7%', |
|||
scopedSlots: { customRender: 'id' }, |
|||
}, |
|||
{ |
|||
title: '所在单位', |
|||
align: 'center', |
|||
dataIndex: 'company', |
|||
key: 'company', |
|||
}, |
|||
{ |
|||
title: '职务', |
|||
align: 'center', |
|||
dataIndex: 'duties', |
|||
key: 'duties', |
|||
}, |
|||
{ |
|||
title: '姓名', |
|||
align: 'center', |
|||
dataIndex: 'name', |
|||
key: 'name', |
|||
}, |
|||
{ |
|||
title: '性别', |
|||
align: 'center', |
|||
dataIndex: 'sex', |
|||
key: 'sex', |
|||
scopedSlots: { customRender: 'sex' }, |
|||
}, |
|||
{ |
|||
title: '照片', |
|||
align: 'center', |
|||
dataIndex: 'teacherPhoto', |
|||
key: 'teacherPhoto', |
|||
scopedSlots: { customRender: 'teacherPhoto' }, |
|||
}, |
|||
{ |
|||
title: '简介', |
|||
align: 'center', |
|||
dataIndex: 'intro', |
|||
key: 'intro', |
|||
}, |
|||
{ |
|||
title: '教师聘书', |
|||
align: 'center', |
|||
dataIndex: 'offer', |
|||
key: 'offer', |
|||
scopedSlots: { customRender: 'offer' }, |
|||
}, |
|||
{ |
|||
title: '教师简历', |
|||
align: 'center', |
|||
dataIndex: 'resume', |
|||
key: 'resume', |
|||
scopedSlots: { customRender: 'resume' }, |
|||
}, |
|||
{ |
|||
title: '编辑', |
|||
align: 'center', |
|||
dataIndex: 'edit', |
|||
key: 'edit', |
|||
scopedSlots: { customRender: 'edit' }, |
|||
}, |
|||
]; |
|||
export default { |
|||
name: 'Teacher', |
|||
data() { |
|||
return { |
|||
upload, |
|||
//限制文件上传的格式 |
|||
beforeUpload: file => { |
|||
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'; |
|||
if (!isJpgOrPng) { |
|||
this.$message.error('仅支持 JPG/PNG 格式的图片!'); |
|||
this.fileList = []; |
|||
} |
|||
return isJpgOrPng; |
|||
}, |
|||
beforeUpload1: file => { |
|||
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'; |
|||
if (!isJpgOrPng) { |
|||
this.$message.error('仅支持 JPG/PNG 格式的图片!'); |
|||
this.fileList1 = []; |
|||
} |
|||
return isJpgOrPng; |
|||
}, |
|||
beforeUpload2: file => { |
|||
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'; |
|||
if (!isJpgOrPng) { |
|||
this.$message.error('仅支持 JPG/PNG 格式的图片!'); |
|||
this.fileList2 = []; |
|||
} |
|||
return isJpgOrPng; |
|||
}, |
|||
columns, |
|||
formItemLayout, |
|||
tailItemLayout, |
|||
form: this.$form.createForm(this, { name: 'teacher-add' }), |
|||
height: '', |
|||
lists: {}, |
|||
pagination: { current: 1, pageSize: 10, total: 0 }, |
|||
typeList: [], // 人才类型数组 |
|||
teacherType: [], // 已选中的 搜索时的 人才类型 |
|||
addType: [], // 已选中的 添加时的 人才类型 |
|||
addData: { |
|||
company: '', // 所在公司/单位名称 |
|||
duties: '', // 职务/职称 |
|||
intro: '', // 简介(图片id) |
|||
name: '', // 人才名称 |
|||
serviceCase: '', // 服务案例 |
|||
sex: 0, // 性别 |
|||
}, |
|||
teacherName: '', |
|||
pageNum: 1, |
|||
visible: false, // 添加表单 |
|||
visible1: false, // 修改表单 |
|||
fileList: [], // 人才照片数组 |
|||
fileList1: [], // 人才聘书数组 |
|||
fileList2: [], // 人才简历数组 |
|||
editData: { |
|||
id: '', // 人才id |
|||
company: '', // 所在公司/单位名称 |
|||
duties: '', // 职务/职称 |
|||
intro: '', // 简介(图片id) |
|||
name: '', // 人才名称 |
|||
serviceCase: '', // 服务案例 |
|||
sex: 0, // 性别 |
|||
teacherPhoto: '', // 照片路径 |
|||
teacherPhotoId: '', // 照片id |
|||
offer: '', // 聘书(图片)路径 |
|||
offerId: '', // 聘书id |
|||
resume: '', // 简历(图片)路径 |
|||
resumeId: '', // 简历id |
|||
categoryList: [], |
|||
}, |
|||
}; |
|||
}, |
|||
|
|||
created() { |
|||
this.getTeaClass(); |
|||
this.selModelSearch(); |
|||
}, |
|||
mounted() { |
|||
let th = 150; |
|||
let wh = window.innerHeight; |
|||
this.height = wh - th; |
|||
window.onresize = () => { |
|||
return (() => { |
|||
wh = window.innerHeight; |
|||
this.height = wh - th; |
|||
})(); |
|||
}; |
|||
}, |
|||
methods: { |
|||
/** |
|||
* 获取人才列表 |
|||
*/ |
|||
async selModelSearch() { |
|||
try { |
|||
const { teacherName, pageNum, teacherType } = this; |
|||
const params = { |
|||
param: { |
|||
teacherName, |
|||
pageNum, |
|||
pageSize: 10, |
|||
teacherType, |
|||
}, |
|||
}; |
|||
const res = await getFindTeachH(params); |
|||
const { code, data, msg } = res.data; |
|||
if (code === 200) { |
|||
this.lists = data; |
|||
this.pagination.total = parseInt(data.total); |
|||
const paper = { ...this.pagination }; |
|||
paper.current = data.pageNum; |
|||
paper.total = +data.total; |
|||
paper.pageSize = data.pageSize; |
|||
this.pagination = paper; |
|||
} else { |
|||
throw msg; |
|||
} |
|||
} catch (error) { |
|||
throw error; |
|||
} |
|||
}, |
|||
/** |
|||
* 查询人才类型 |
|||
*/ |
|||
async getTeaClass() { |
|||
try { |
|||
const params = { param: { categoryName: '', recStatus: 0 } }; |
|||
const res = await getSelTutorH(params); |
|||
const { code, msg, data } = res.data; |
|||
if (code === 200) { |
|||
this.typeList = data; |
|||
} else { |
|||
throw msg; |
|||
} |
|||
} catch (error) { |
|||
throw error; |
|||
} |
|||
}, |
|||
/** |
|||
* 改变人才分类 |
|||
*/ |
|||
typeChange(e, num) { |
|||
if (num === 0) { |
|||
this.teacherType = e; |
|||
} else if (num === 1) { |
|||
this.addType = e; |
|||
} else if (num === 2) { |
|||
this.editData.categoryList = e; |
|||
} |
|||
}, |
|||
/** |
|||
* 提交添加表单 |
|||
*/ |
|||
handleSubmit(e) { |
|||
console.log(e); |
|||
}, |
|||
/** |
|||
* 表格改变分页 |
|||
*/ |
|||
handleTableChange(pagination) { |
|||
this.pageNum = pagination.current; |
|||
this.selModelSearch(); |
|||
}, |
|||
// 删除 |
|||
async onDelete(teacherId) { |
|||
try { |
|||
const params = { param: { teacherId } }; |
|||
const res = await delTeacher(params); |
|||
const { data, msg, code } = res.data; |
|||
if (code === 200) { |
|||
this.$message.success('删除成功'); |
|||
this.selModelSearch(); |
|||
} else { |
|||
throw msg; |
|||
} |
|||
} catch (error) { |
|||
this.$message.error(error || '删除失败'); |
|||
} |
|||
}, |
|||
/** |
|||
* 添加时修改性别 |
|||
*/ |
|||
changeAddSex(e) { |
|||
this.addData.sex = e.target.value; |
|||
}, |
|||
/** |
|||
* 增加人才的上传图片事件 |
|||
*/ |
|||
handleChange(info, num) { |
|||
if (info.file.status === 'done') { |
|||
if (num === 1) { |
|||
this.fileList.push(info.file.response.data[0].id); |
|||
} else if (num === 2) { |
|||
this.fileList1.push(info.file.response.data[0].id); |
|||
} else if (num === 3) { |
|||
this.fileList2.push(info.file.response.data[0].id); |
|||
} else if (num === 4) { |
|||
this.editData.teacherPhoto = info.file.response.data[0].visitUrl; |
|||
this.editData.teacherPhotoId = info.file.response.data[0].id; |
|||
} else if (num === 5) { |
|||
this.editData.offer = info.file.response.data[0].visitUrl; |
|||
this.editData.offerId = info.file.response.data[0].id; |
|||
} else if (num === 6) { |
|||
this.editData.resume = info.file.response.data[0].visitUrl; |
|||
this.editData.resumeId = info.file.response.data[0].id; |
|||
} |
|||
} else if (info.file.status === 'removed') { |
|||
if (num === 1) { |
|||
this.fileList = info.fileList; |
|||
} else if (num === 2) { |
|||
this.fileList1 = info.fileList; |
|||
} else if (num === 3) { |
|||
this.fileList2 = info.fileList; |
|||
} |
|||
} |
|||
}, |
|||
/** |
|||
* 增加人才 事件 |
|||
*/ |
|||
async addTeacherData() { |
|||
try { |
|||
const { addData, addType, fileList, fileList1, fileList2 } = this; |
|||
const params = { |
|||
param: { |
|||
services: addType, |
|||
teacherPhoto: fileList[0], |
|||
offer: fileList1[0], |
|||
resume: fileList2[0], |
|||
...addData, |
|||
}, |
|||
}; |
|||
const res = await addTeacher(params); |
|||
const { code, msg, data } = res.data; |
|||
if (code === 200) { |
|||
this.$message.success('增加人才成功'); |
|||
this.selModelSearch(); |
|||
this.visible = false; |
|||
for (let key in this.addData) { |
|||
this.addData[key] = ''; |
|||
} |
|||
this.addType = []; |
|||
this.fileList = []; |
|||
this.fileList1 = []; |
|||
this.fileList2 = []; |
|||
} else { |
|||
this.$message.error('增加人才失败'); |
|||
} |
|||
} catch (error) { |
|||
this.$message.error('增加人才失败'); |
|||
} |
|||
}, |
|||
/** |
|||
* 显示修改modal |
|||
*/ |
|||
showEditModal(data) { |
|||
let { editData } = this; |
|||
editData = { ...data }; |
|||
this.editData = { ...editData }; |
|||
this.visible1 = true; |
|||
}, |
|||
/** |
|||
* 修改确定事件 |
|||
*/ |
|||
async editTeacherData() { |
|||
try { |
|||
const { editData } = this; |
|||
const params = { |
|||
param: { |
|||
...editData, |
|||
offer: editData.offerId, |
|||
resume: editData.resumeId, |
|||
teacherPhoto: editData.teacherPhotoId, |
|||
}, |
|||
}; |
|||
const res = await upTeacher(params); |
|||
const { code, msg, data } = res.data; |
|||
if (code === 200) { |
|||
this.visible1 = false; |
|||
this.$message.success('修改成功'); |
|||
this.selModelSearch(); |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
} catch (error) { |
|||
this.$message.error('修改失败'); |
|||
} |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
@ -0,0 +1,355 @@ |
|||
<template> |
|||
<div class="pa-3 white fill-height d-flex flex-column"> |
|||
<!-- 搜索 --> |
|||
<div class="d-flex flex-wrap pb-3"> |
|||
<div> |
|||
<span class="mr-4">分类名称:</span> |
|||
<a-input placeholder="分类名称" style="width: 150px" v-model="typeName" /> |
|||
<span class="ml-4 mr-4">分类状态:</span> |
|||
<a-select |
|||
@change="typeChange($event, 0)" |
|||
allow-clear |
|||
placeholder="分类状态" |
|||
style="width: 200px" |
|||
> |
|||
<a-select-option |
|||
:key="item.id" |
|||
:value="item.id" |
|||
v-for="item in typeList" |
|||
>{{ item.categoryName }}</a-select-option> |
|||
</a-select> |
|||
|
|||
<a-button @click="getTeaClass" class="ml-3" type="primary">搜索</a-button> |
|||
</div> |
|||
<div class="flex-1"></div> |
|||
<a-button |
|||
@click="visible = true" |
|||
class="editable-add-btn" |
|||
style="margin-top: 1px" |
|||
type="primary" |
|||
>增加</a-button> |
|||
</div> |
|||
<!-- 添加表单 --> |
|||
<a-modal |
|||
:mask-closable="false" |
|||
@ok="addClass" |
|||
destroy-on-close |
|||
title="添加人才" |
|||
v-model="visible" |
|||
width="700px" |
|||
> |
|||
<a-form :form="form"> |
|||
<!-- 分类名称 --> |
|||
<a-form-item |
|||
:label-col="formItemLayout.labelCol" |
|||
:wrapper-col="formItemLayout.wrapperCol" |
|||
label="分类名称" |
|||
required |
|||
> |
|||
<a-input placeholder="分类名称" v-model="addType" /> |
|||
</a-form-item> |
|||
</a-form> |
|||
</a-modal> |
|||
<!-- 表格 --> |
|||
<div class="main flex-1"> |
|||
<div style="width: 100%" v-if="list && list.length > 0"> |
|||
<a-table |
|||
:columns="columns" |
|||
:data-source="list" |
|||
: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="recStatus" slot-scope="text, record"> |
|||
<span style="width: 100%" v-if="record.recStatus === 0">正常</span> |
|||
<span style="width: 100%" v-else-if="record.recStatus === 1">禁用</span> |
|||
<span style="width: 100%" v-else-if="record.recStatus === 2">删除</span> |
|||
</template> |
|||
|
|||
<template slot="edit" slot-scope="text, record"> |
|||
<a-icon |
|||
@click="showEditModel(record)" |
|||
class="mr-3 pointer" |
|||
theme="twoTone" |
|||
type="edit" |
|||
/> |
|||
<a-popconfirm @confirm="() => onDelete(record.id)" title="确定要删除这一条?"> |
|||
<a-icon class="mr-3 pointer" theme="twoTone" two-tone-color="#ff0000" type="delete" /> |
|||
</a-popconfirm> |
|||
</template> |
|||
</a-table> |
|||
</div> |
|||
<a-empty v-else /> |
|||
</div> |
|||
<!-- 修改表单 --> |
|||
<a-modal |
|||
:mask-closable="false" |
|||
@ok="editChange" |
|||
destroy-on-close |
|||
title="修改" |
|||
v-model="visible1" |
|||
width="700px" |
|||
> |
|||
<a-form :form="form"> |
|||
<!-- 分类名称 --> |
|||
<a-form-item |
|||
:label-col="formItemLayout.labelCol" |
|||
:wrapper-col="formItemLayout.wrapperCol" |
|||
label="分类名称" |
|||
> |
|||
<a-input placeholder="分类名称" v-model="editData.categoryName" /> |
|||
</a-form-item> |
|||
<!-- 分类状态 --> |
|||
<a-form-item |
|||
:label-col="formItemLayout.labelCol" |
|||
:wrapper-col="formItemLayout.wrapperCol" |
|||
label="分类状态" |
|||
> |
|||
<a-select |
|||
:default-value="getDefault(editData.recStatus)" |
|||
@change="typeChange($event, 1)" |
|||
allow-clear |
|||
placeholder="分类状态" |
|||
style="width: 100%" |
|||
> |
|||
<a-select-option |
|||
:key="item.id" |
|||
:value="item.id" |
|||
v-for="item in typeList" |
|||
>{{ item.categoryName }}</a-select-option> |
|||
</a-select> |
|||
</a-form-item> |
|||
</a-form> |
|||
</a-modal> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { getSelTutorH, addTutor, upTutorH, delTutorH } from 'config/api'; |
|||
const formItemLayout = { |
|||
labelCol: { span: 6 }, |
|||
wrapperCol: { span: 16 }, |
|||
}; |
|||
const tailItemLayout = { wrapperCol: { span: 16, offset: 6 } }; |
|||
const columns = [ |
|||
{ |
|||
title: '序号', |
|||
align: 'center', |
|||
dataIndex: 'id', |
|||
key: 'id', |
|||
width: '7%', |
|||
scopedSlots: { customRender: 'id' }, |
|||
}, |
|||
{ |
|||
title: '分类名称', |
|||
align: 'center', |
|||
dataIndex: 'categoryName', |
|||
key: 'categoryName', |
|||
}, |
|||
{ |
|||
title: '分类状态', |
|||
align: 'center', |
|||
dataIndex: 'recStatus', |
|||
key: 'recStatus', |
|||
scopedSlots: { customRender: 'recStatus' }, |
|||
}, |
|||
{ |
|||
title: '修改', |
|||
align: 'center', |
|||
dataIndex: 'edit', |
|||
key: 'edit', |
|||
scopedSlots: { customRender: 'edit' }, |
|||
}, |
|||
]; |
|||
export default { |
|||
name: 'Teacher', |
|||
data() { |
|||
return { |
|||
columns, |
|||
formItemLayout, |
|||
tailItemLayout, |
|||
form: this.$form.createForm(this, { name: 'teacher-add' }), |
|||
height: '', |
|||
list: [], |
|||
pagination: { current: 1, pageSize: 10, total: 0 }, |
|||
typeList: [ |
|||
{ |
|||
id: 0, |
|||
categoryName: '正常', |
|||
}, |
|||
{ |
|||
id: 1, |
|||
categoryName: '禁用', |
|||
}, |
|||
{ |
|||
id: 2, |
|||
categoryName: '删除', |
|||
}, |
|||
], // 人才类型数组 |
|||
teacherType: '', // 已选中的 搜索时的 类型状态 |
|||
addType: '', // 已选中的 添加时的 人才类型 |
|||
typeName: '', |
|||
pageNum: 1, |
|||
visible: false, // 添加表单 |
|||
visible1: false, // 修改表单 |
|||
editData: { |
|||
categoryName: '', |
|||
recStatus: '', |
|||
id: '', |
|||
}, |
|||
}; |
|||
}, |
|||
|
|||
created() { |
|||
this.getTeaClass(); |
|||
}, |
|||
mounted() { |
|||
let th = 150; |
|||
let wh = window.innerHeight; |
|||
this.height = wh - th; |
|||
window.onresize = () => { |
|||
return (() => { |
|||
wh = window.innerHeight; |
|||
this.height = wh - th; |
|||
})(); |
|||
}; |
|||
}, |
|||
methods: { |
|||
/** |
|||
* 查询人才类型 |
|||
*/ |
|||
async getTeaClass() { |
|||
try { |
|||
const params = { |
|||
param: { |
|||
categoryName: this.typeName, |
|||
recStatus: this.teacherType, |
|||
}, |
|||
}; |
|||
const res = await getSelTutorH(params); |
|||
const { code, msg, data } = res.data; |
|||
if (code === 200) { |
|||
this.list = data; |
|||
} else { |
|||
throw msg; |
|||
} |
|||
} catch (error) { |
|||
throw error; |
|||
} |
|||
}, |
|||
/** |
|||
* 改变人才分类 |
|||
*/ |
|||
typeChange(e, num) { |
|||
if (num === 0) { |
|||
this.teacherType = e; |
|||
} else if (num === 1) { |
|||
this.editData.recStatus = e; |
|||
} |
|||
}, |
|||
/** |
|||
* 添加人才分类 |
|||
*/ |
|||
async addClass() { |
|||
try { |
|||
const { addType } = this; |
|||
if (addType === '') { |
|||
this.$message.error('请填写分类名称'); |
|||
return; |
|||
} |
|||
const params = { param: { categoryName: addType } }; |
|||
const res = await addTutor(params); |
|||
const { code, msg, data } = res.data; |
|||
if (code === 200) { |
|||
this.$message.success('分类添加成功'); |
|||
this.visible = false; |
|||
this.getTeaClass(); |
|||
} else { |
|||
this.$message.error('分类添加失败'); |
|||
} |
|||
} catch (error) { |
|||
this.$message.error('分类添加失败'); |
|||
} |
|||
}, |
|||
/** |
|||
* 表格改变分页 |
|||
*/ |
|||
handleTableChange(pagination) { |
|||
// this.pageNum = pagination.current; |
|||
this.pagination.current = pagination.current; |
|||
}, |
|||
/** |
|||
* 显示修改弹框,获取需要修改的数据 |
|||
*/ |
|||
showEditModel(data) { |
|||
this.editData = data; |
|||
this.visible1 = true; |
|||
}, |
|||
/** |
|||
* 确认修改 |
|||
*/ |
|||
async editChange() { |
|||
try { |
|||
const { editData } = this; |
|||
if (!editData.categoryName && !editData.recStatus) { |
|||
this.$message.error('请填写完整信息'); |
|||
return; |
|||
} |
|||
const params = { param: { ...editData } }; |
|||
const res = await upTutorH(params); |
|||
const { code, msg, data } = res.data; |
|||
if (code === 200) { |
|||
this.$message.success('修改成功'); |
|||
this.visible1 = false; |
|||
this.editData = { |
|||
categoryName: '', |
|||
recStatus: '', |
|||
id: '', |
|||
}; |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
} catch (error) { |
|||
this.$message.error('修改失败'); |
|||
} |
|||
}, |
|||
/** |
|||
* 获取分类默认值 |
|||
*/ |
|||
getDefault(e) { |
|||
if (e !== '') { |
|||
const defaultObj = this.typeList.find(item => { |
|||
return item.id === e; |
|||
}); |
|||
return defaultObj.categoryName; |
|||
} else { |
|||
return ''; |
|||
} |
|||
}, |
|||
|
|||
// 删除 |
|||
async onDelete(id) { |
|||
try { |
|||
const params = { param: { id } }; |
|||
const res = await delTutorH(params); |
|||
const { data, msg, code } = res.data; |
|||
if (code === 200) { |
|||
this.$message.success('删除成功'); |
|||
this.getTeaClass(); |
|||
} else { |
|||
throw msg; |
|||
} |
|||
} catch (error) { |
|||
this.$message.error(error || '删除失败'); |
|||
} |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
Loading…
Reference in new issue