<template>
|
<div class="main_index">
|
<div class="search_from">
|
<el-form
|
:model="formInline"
|
inline
|
label-width="100px"
|
class="form-flex"
|
size="small"
|
>
|
<div style="width: 90%">
|
<el-form-item label="项目名称：">
|
<el-input
|
v-model.trim="formInline.projName"
|
style="width: 240px"
|
@keyup.native="keyupEvent($event)"
|
type="tel"
|
clearable
|
placeholder="请输入"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="创建时间：">
|
<el-date-picker
|
v-model="createdTime"
|
style="width: 240px"
|
format="yyyy-MM-dd"
|
value-format="yyyy-MM-dd"
|
type="daterange"
|
range-separator="-"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
>
|
</el-date-picker>
|
</el-form-item>
|
<el-form-item label="项目状态：">
|
<el-select
|
v-model="formInline.status"
|
style="width:240px"
|
clearable
|
placeholder="请选择"
|
>
|
<el-option label="全部" value="all"></el-option>
|
<el-option
|
v-for="item in relustObj.statusList"
|
:key="item.code"
|
:label="item.name"
|
:value="item.code"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
</div>
|
<el-form-item style="text-align: right;">
|
<!-- v-if='filterBtnById("150102")' -->
|
<el-button type="primary" style="margin-left: 10px;margin-bottom: 8px;" @click="onSearch">查 询</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
<div class="table_box">
|
<div style="margin-left: 10px;text-align: right;">
|
<el-button type="primary" size="small" @click="addProduct">新增项目</el-button>
|
</div>
|
<Etable
|
hasIndex
|
httpUrl="projectList"
|
:columns="columns"
|
:searchData="searchData"
|
@getDataList="getDataList"
|
:exportUrl="{
|
url: '/qyp/project/export',
|
powerId: '',
|
name: '项目列表',
|
}"
|
></Etable>
|
</div>
|
<el-dialog top="2vh" :title="title" :visible.sync="addProd" width="60%">
|
<!-- 新增商品名称 -->
|
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" size="small" label-width="100px" class="demo-ruleForm">
|
<el-form-item label="项目名称" prop="projName">
|
<el-input v-model="ruleForm.projName" :disabled="disabled" :maxlength="50"></el-input>
|
</el-form-item>
|
<el-form-item label="项目价格" prop="projPrice">
|
<el-input v-model="ruleForm.projPrice" :disabled="disabled" :maxlength="10"></el-input>
|
</el-form-item>
|
<el-form-item label="项目链接" prop="projUrl">
|
<el-input v-model="ruleForm.projUrl" :disabled="disabled" :maxlength="150"></el-input>
|
</el-form-item>
|
<el-form-item label="项目描述" prop="projDesc">
|
<el-input type="textarea" v-model="ruleForm.projDesc" :disabled="disabled"></el-input>
|
</el-form-item>
|
<el-form-item label="项目状态" prop="status">
|
<el-radio-group v-model="ruleForm.status" :disabled="disabled">
|
<el-radio v-for="item in relustObj.statusList" :key="item.code" :label="item.code">{{ item.name }}</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item label="项目背景图" v-if="addProd" ref="backFilePath" prop="backFilePath">
|
<uploadImg v-if="addProd" @sendList="imgSet($event,'backFilePath')" :disabled="disabled" :defaultList="ruleForm.backFilePath"></uploadImg>
|
</el-form-item>
|
<el-form-item label="项目logo" ref="logoFilePath" prop="logoFilePath">
|
<uploadImg v-if="addProd" @sendList="imgSet($event,'logoFilePath')" :disabled="disabled" :defaultList="ruleForm.logoFilePath"></uploadImg>
|
</el-form-item>
|
<el-form-item label="平台头图" ref="titleFilePath" prop="titleFilePath">
|
<uploadImg v-if="addProd" @sendList="imgSet($event,'titleFilePath')" :disabled="disabled" :defaultList="ruleForm.titleFilePath"></uploadImg>
|
</el-form-item>
|
<el-form-item label="会员权益" ref="qyFilePath" prop="qyFilePath">
|
<uploadImg v-if="addProd" @sendList="imgSet($event,'qyFilePath')" :disabled="disabled" :defaultList="ruleForm.qyFilePath"></uploadImg>
|
</el-form-item>
|
<el-form-item label="活动规则" ref="ruleFilePath" prop="ruleFilePath">
|
<uploadImg v-if="addProd" @sendList="imgSet($event,'ruleFilePath')" :disabled="disabled" :defaultList="ruleForm.ruleFilePath"></uploadImg>
|
</el-form-item>
|
<el-form-item style="text-align:right;" v-if="!disabled">
|
<el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
|
<!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
|
</el-form-item>
|
</el-form>
|
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import Etable from "../../components/table.vue";
|
import {projectInit,projectAdd,projectDtl,projectUpdata} from "@/api/credit";
|
import uploadImg from "@/components/upload.vue";
|
export default {
|
name: "order",
|
components: { Etable,uploadImg },
|
data() {
|
let backFilePathImage = (rule, value, callback) => { //验证器
|
if (!this.ruleForm.backFilePath.length) { //为true代表图片在 false报错
|
callback(new Error('请上传项目背景图'));
|
} else {
|
callback();
|
}
|
};
|
let logoFilePathImage = (rule, value, callback) => { //验证器
|
if (!this.ruleForm.logoFilePath.length) { //为true代表图片在 false报错
|
callback(new Error('请上传项目logo图'));
|
} else {
|
callback();
|
}
|
};
|
let titleFilePathImage = (rule, value, callback) => { //验证器
|
if (!this.ruleForm.titleFilePath.length) { //为true代表图片在 false报错
|
callback(new Error('请上传平台头图'));
|
} else {
|
callback();
|
}
|
};
|
let qyFilePathImage = (rule, value, callback) => { //验证器
|
if (!this.ruleForm.qyFilePath.length) { //为true代表图片在 false报错
|
callback(new Error('请上传会员权益图'));
|
} else {
|
callback();
|
}
|
};
|
let ruleFilePathImage = (rule, value, callback) => { //验证器
|
if (!this.ruleForm.ruleFilePath.length) { //为true代表图片在 false报错
|
callback(new Error('请上传会员权益图'));
|
} else {
|
callback();
|
}
|
};
|
return {
|
disabled: false,
|
formInline: {status:"all"},
|
searchData: {},
|
columns: [
|
{
|
lable: "项目名称",
|
prop: "projName",
|
align: "center",
|
width: "300",
|
},
|
{
|
lable: "项目价格",
|
prop: "projPrice",
|
align: "center",
|
width: "180",
|
},
|
{
|
lable: "项目链接",
|
prop: "projUrl",
|
align: "center"
|
},
|
{
|
lable: "创建时间",
|
prop: "creTime",
|
align: "center",
|
width: "150",
|
},
|
{
|
lable: "项目状态",
|
prop: "statusStr",
|
align: "center",
|
width: "180",
|
},
|
{
|
lable: "项目描述",
|
prop: "projDesc",
|
align: "center",
|
},
|
{
|
lable: "",
|
},
|
{
|
lable: "操作",
|
align: "center",
|
width: "200",
|
fixed: "right",
|
render: (h, scope) => {
|
return h("div", [
|
h(
|
"el-button",
|
{
|
props:{
|
type:'text'
|
},
|
style: {
|
// display: this.filterBtnById(150101)
|
// ? "inline-block"
|
// : "none",
|
},
|
on: {
|
click: () => {
|
this.title = '项目详情';
|
this.disabled = true;
|
let {projId} = scope.row;
|
this.getProductDetail(projId);
|
},
|
},
|
},
|
"查看详情"
|
),
|
h(
|
"el-button",
|
{
|
props:{
|
type:'text'
|
},
|
style: {
|
"margin-left": "15px",
|
// display: this.filterBtnById(150104)
|
// ? "inline-block"
|
// : "none",
|
},
|
on: {
|
click: () => {
|
this.title = '编辑项目';
|
this.disabled = false;
|
let {projId} = scope.row;
|
this.getProductDetail(projId);
|
},
|
},
|
},
|
"编辑"
|
)
|
]);
|
},
|
},
|
],
|
relustObj: {},
|
addProd:false,
|
createdTime:[],
|
ruleForm:{
|
backFilePath:[],
|
logoFilePath:[],
|
titleFilePath:[],
|
qyFilePath:[],
|
ruleFilePath:[]
|
},
|
rules: {
|
projName: [
|
{ required: true, message: '请输入项目名称', trigger: 'blur' }
|
],
|
projPrice: [
|
{ required: true, message: '请输入项目价格', trigger: 'blur' }
|
],
|
projUrl: [
|
{ required: true, message: '请输入项目链接', trigger: 'blur' }
|
],
|
projDesc: [
|
{ required: true, message: '请输入项目描述', trigger: 'blur' }
|
],
|
status: [
|
{ required: true, message: '请选择项目状态', trigger: 'change' }
|
],
|
backFilePath: [
|
{ required: true,trigger: 'change',validator: backFilePathImage }
|
],
|
logoFilePath: [
|
{ required: true, trigger: 'change',validator: logoFilePathImage }
|
],
|
titleFilePath: [
|
{ required: true, trigger: 'change',validator: titleFilePathImage }
|
],
|
qyFilePath: [
|
{ required: true, trigger: 'change' ,validator: qyFilePathImage }
|
],
|
ruleFilePath: [
|
{ required: true, trigger: 'change',validator: ruleFilePathImage }
|
]
|
},
|
title:"新增项目"
|
}
|
},
|
watch:{
|
addProd:{
|
handler: function(val) {
|
if(!val){
|
this.ruleForm = {
|
projName:"",
|
projPrice:"",
|
projUrl:"",
|
projDesc:"",
|
status:"",
|
backFilePath:[],
|
logoFilePath:[],
|
titleFilePath:[],
|
qyFilePath:[],
|
ruleFilePath:[]
|
};
|
this.$refs['ruleForm'].resetFields();
|
}
|
},
|
deep: true
|
}
|
},
|
//生命周期 - 创建完成（可以访问当前this实例）
|
created() {
|
this.initSerch();
|
},
|
methods: {
|
keyupEvent(e) {
|
//只能输入整数
|
e.target.value = e.target.value.replace(/[^\d]/g, "");
|
},
|
addPDH(){
|
this.$refs['skuObj'].validate((valid) => {
|
if(valid){
|
let {productAttr,prodName,prodFundType,prodOsType} = this.skuObj;
|
let data = {prodName,prodFundType,prodOsType,prodBrandCode:productAttr[1].value,prodModelCode:productAttr[2].value,prodType:productAttr[0].value};
|
prodAdd(data).then((res)=>{
|
this.addProd = false;
|
this.initSerch();
|
})
|
}
|
})
|
},
|
addPDHCancelBut(){
|
this.$refs["skuObj"].resetFields();
|
this.addProd = false;
|
},
|
addProduct(){
|
this.title = '新增项目';
|
this.addProd = true;
|
this.disabled = false;
|
},
|
onSearch() {
|
if (this.createdTime && this.createdTime.length) {
|
this.formInline.creStartTime = this.createdTime[0];
|
this.formInline.creEndTime = this.createdTime[1];
|
} else {
|
this.formInline.creStartTime = null;
|
this.formInline.creEndTime = null;
|
}
|
let objForm = JSON.parse(JSON.stringify(this.formInline));
|
for (let key in objForm) {
|
if (objForm[key] === "all") {
|
delete objForm[key];
|
}
|
}
|
this.searchData = { ...objForm };
|
},
|
initSerch() {
|
projectInit().then(({ body }) => {
|
this.relustObj = body;
|
});
|
},
|
prodListInit() {
|
prodListInit().then(({ body }) => {
|
let prodList = body.items.map(f=>{
|
return {
|
code:f.prodId,
|
name:f.prodName
|
}
|
});
|
this.relustObj.prodList = prodList;
|
});
|
},
|
getDataList(e) {
|
},
|
submitForm(formName) {
|
this.$refs[formName].validate((valid) => {
|
if (valid) {
|
let {backFilePath,logoFilePath,titleFilePath,qyFilePath,ruleFilePath,projId} = this.ruleForm;
|
let method = {projectUpdata,projectAdd};
|
let data = {};
|
if(projId){
|
data = {...this.ruleForm,backFilePath:backFilePath[0],logoFilePath:logoFilePath[0],titleFilePath:titleFilePath[0],qyFilePath:qyFilePath[0],ruleFilePath:ruleFilePath[0]}
|
}else{
|
data = {...this.ruleForm,backFilePath:backFilePath[0],logoFilePath:logoFilePath[0],titleFilePath:titleFilePath[0],qyFilePath:qyFilePath[0],ruleFilePath:ruleFilePath[0]}
|
}
|
method[projId?"projectUpdata":"projectAdd"](data).then(res=>{
|
this.$message.success("创建成功");
|
this.addProd = false;
|
this.onSearch();
|
})
|
} else {
|
console.log('error submit!!');
|
return false;
|
}
|
});
|
},
|
resetForm(formName) {
|
this.$refs[formName].resetFields();
|
},
|
imgSet(e,id){
|
let fileRef = id + "";
|
//文件上传
|
this.ruleForm[id] = e.map((res) => {
|
return res.filePath;
|
});
|
this.$refs[fileRef].clearValidate();
|
},
|
getProductDetail(projId,type){
|
projectDtl({projId:projId}).then(({body})=>{
|
let {backFilePath,logoFilePath,titleFilePath,qyFilePath,ruleFilePath} = body;
|
body.backFilePath = this.setDefaultImg(backFilePath,'backFilePath');
|
body.logoFilePath = this.setDefaultImg(logoFilePath,'logoFilePath');
|
body.titleFilePath = this.setDefaultImg(titleFilePath,"titleFilePath");
|
body.qyFilePath = this.setDefaultImg(qyFilePath,"qyFilePath");
|
body.ruleFilePath = this.setDefaultImg(ruleFilePath,"ruleFilePath");
|
this.ruleForm = body;
|
this.$nextTick(()=>{
|
this.addProd = true;
|
});
|
})
|
},
|
setDefaultImg(url,type){
|
let backArr = [url].map((n,index)=>{
|
return {url:n,filePath:n,uid:type+index,fileId:type+index,fileName:n,name:n};
|
});
|
return backArr
|
}
|
}
|
};
|
</script>
|
|
<style scoped lang="scss">
|
.main_index {
|
background-color: #f0f2f5;
|
.table_box_num {
|
margin-top: 5px;
|
display: flex;
|
justify-content: flex-end;
|
align-items: center;
|
color: #666;
|
font-size: 14px;
|
font-weight: bold;
|
padding-right: 16px;
|
box-sizing: border-box;
|
span {
|
display: inline-block;
|
&:nth-child(even) {
|
margin-right: 20px;
|
color: #333;
|
}
|
}
|
}
|
.el-form-div {
|
width: 100%;
|
display: flex;
|
}
|
.tips{
|
color: #f56c6c;
|
}
|
}
|
</style>
|
|
