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