You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
539 lines
18 KiB
539 lines
18 KiB
<template>
|
|
<div class="body">
|
|
<p class="title">资产挂牌</p>
|
|
<div class="listing_title">基础信息</div>
|
|
<el-form :model="ruleForm" :rules="rules" ref="ruleForm1" label-width="150px" class="ruleForm" label-position="left">
|
|
<el-form-item label="上传资产图片" prop="serial_img" >
|
|
<p class="listing_tips">上传高清质量资产正面图，有助快速通过审核，方便购买方了解资产，图片尺寸建议为800px * 800px</p>
|
|
<div class="listing_upload">
|
|
<el-upload
|
|
class="avatar-uploader"
|
|
:action="action"
|
|
:show-file-list="false"
|
|
:on-change="fileChange"
|
|
|
|
:on-success="(res)=>{handleAvatarSuccess(0,res,index)}" v-for="(item,index) in 5" :key="index">
|
|
<img v-if="ruleForm.serial_img[index]" :src="ruleForm.serial_img[index]" class="avatar">
|
|
<template v-else>
|
|
<i class="el-icon-plus avatar-uploader-icon"></i>
|
|
<p class="avatar_p">添加上传图片</p>
|
|
</template>
|
|
</el-upload>
|
|
</div>
|
|
</el-form-item>
|
|
<el-form-item label="资产名称" prop="serial_name" >
|
|
<el-input v-model="ruleForm.serial_name" placeholder="最多允许输入30个汉字（60字符）" class="serial_name"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="资产类型" prop="asset_type_id" >
|
|
<p class="listing_tips">请确认或修改资产类型</p>
|
|
<el-cascader filterable :props="props" :options="options" class="serial_name" v-model="ruleForm.asset_type_id"></el-cascader>
|
|
</el-form-item>
|
|
<el-form-item label="资产所在地" prop="province">
|
|
<el-select placeholder="选择具体省份" clearable filterable v-model="ruleForm.province" class="select_city" @change="changeDate(0)">
|
|
<el-option
|
|
v-for="item in province"
|
|
:key="item.id"
|
|
:label="item.name"
|
|
:value="item.province_code" >
|
|
</el-option>
|
|
</el-select>
|
|
<el-select placeholder="选择具体城市" clearable filterable v-model="ruleForm.city" class="select_city" @change="changeDate(1)">
|
|
<el-option
|
|
v-for="item in city"
|
|
:key="item.id"
|
|
:label="item.name"
|
|
:value="item.city_code" >
|
|
</el-option>
|
|
</el-select>
|
|
<el-select placeholder="选择具体区镇" clearable filterable v-model="ruleForm.area" class="select_city">
|
|
<el-option
|
|
v-for="item in area"
|
|
:key="item.id"
|
|
:label="item.name"
|
|
:value="item.area_code">
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="资产基本情况" prop="serial_content" >
|
|
<div class="listing_title1">
|
|
<p class="listing_tips">请确认或修改资产类型</p>
|
|
<div class="listing_title1_right">
|
|
<button class="listing_button">下载模板</button>
|
|
<button class="listing_button">上传文件</button>
|
|
</div>
|
|
</div>
|
|
<mavon-editor
|
|
v-model="ruleForm.serial_content"
|
|
:subfield="false" ref="md" :boxShadow="false"
|
|
@imgAdd="$imgAdd" @change="change"
|
|
class="listing_editor"/>
|
|
<div class="upload_file">
|
|
<p class="listing_tips">已上传文件：</p>
|
|
</div>
|
|
</el-form-item>
|
|
<el-form-item label="其他资产材料" :prop="ruleForm.buy_mode==2?'serial_img' :'' " >
|
|
<p class="listing_tips">请上传与资产相关的证明材料（线上交易请在此处上传相关资产）</p>
|
|
<button class="listing_button">上传文件</button>
|
|
</el-form-item>
|
|
<el-form-item label="内部决策情况" prop="decision" >
|
|
<el-radio v-model="ruleForm.decision" :label="1">个人同意</el-radio>
|
|
<el-radio v-model="ruleForm.decision" :label="2">股东会决议</el-radio>
|
|
<el-radio v-model="ruleForm.decision" :label="3">董事会决议</el-radio>
|
|
<el-radio v-model="ruleForm.decision" :label="4">总经理办公会决议</el-radio>
|
|
<el-radio v-model="ruleForm.decision" :label="5">其他</el-radio>
|
|
<el-input v-model="ruleForm.decision_case" v-if="ruleForm.decision==5" placeholder="请输入其他情况" class="listing_input"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="挂牌时长" prop="cartellino_time_id" >
|
|
<el-select placeholder="选择挂牌时长" clearable filterable v-model="ruleForm.cartellino_time_id" class="select_city1">
|
|
<el-option
|
|
v-for="item in price"
|
|
:key="item.id"
|
|
:label="item.name"
|
|
:value="item.id"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<div class="listing_title">交易信息</div>
|
|
<el-form-item label="挂牌类型" prop="cartellino_type" >
|
|
<el-radio v-model="ruleForm.cartellino_type" :label="1">协议</el-radio>
|
|
<el-radio v-model="ruleForm.cartellino_type" :label="2">拍卖</el-radio>
|
|
</el-form-item>
|
|
<el-form-item label="资产单价" prop="price" v-if="ruleForm.cartellino_type==1">
|
|
<el-input v-model="ruleForm.price" onkeyup="value=value.replace(/[^\d]/g,'')" placeholder="请输入单个资产的价格" class="listing_input"></el-input>
|
|
</el-form-item>
|
|
<div class="listing_flex">
|
|
<el-form-item label="起拍单价" prop="start_auction_money" v-if="ruleForm.cartellino_type==2">
|
|
<el-input v-model="ruleForm.start_auction_money" onkeyup="value=value.replace(/[^\d]/g,'')" placeholder="请输入起拍单价" class="listing_input"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="竞价金额" prop="bidding_money" v-if="ruleForm.cartellino_type==2">
|
|
<el-input v-model="ruleForm.bidding_money" onkeyup="value=value.replace(/[^\d]/g,'')" placeholder="请输入单次竞价时需要增加的金额" class="listing_input"></el-input>
|
|
</el-form-item>
|
|
</div>
|
|
<div class="listing_flex">
|
|
<el-form-item label="资产单位" prop="asset_unit" >
|
|
<el-input v-model="ruleForm.asset_unit" placeholder="请输入单个资产单位的量词" class="listing_input"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="挂牌数量" prop="count">
|
|
<el-input v-model="ruleForm.count" onkeyup="value=value.replace(/[^\d]/g,'')" placeholder="请输入需要挂牌资产的数量" class="listing_input"></el-input>
|
|
</el-form-item>
|
|
</div>
|
|
<el-form-item label="起购数量" prop="pay_count">
|
|
<el-input v-model="ruleForm.pay_count" onkeyup="value=value.replace(/[^\d]/g,'')" placeholder="请输入购买时单次至少购买数量" class="listing_input"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="付款方式" prop="pay_mode" >
|
|
<el-radio v-model="ruleForm.pay_mode" :label="1">网银支付</el-radio>
|
|
<el-radio v-model="ruleForm.pay_mode" :label="2">对公转账</el-radio>
|
|
<span class="listing_tips">交易金额大于200万时系统自动选择对公转账</span>
|
|
</el-form-item>
|
|
<el-form-item label="交易方式" prop="buy_mode" >
|
|
<el-radio v-model="ruleForm.buy_mode" :label="1">线下交易</el-radio>
|
|
<el-radio v-model="ruleForm.buy_mode" :label="2">线上交易</el-radio>
|
|
<span class="listing_tips">选取线上交易请在基础信息内上传资产数据</span>
|
|
</el-form-item>
|
|
<el-form-item label="交付方式" prop="goods_mode">
|
|
<el-radio v-model="ruleForm.goods_mode" :label="1">现场交付</el-radio>
|
|
<el-radio v-model="ruleForm.goods_mode" :label="2">物流配送</el-radio>
|
|
<el-input v-model="ruleForm.express_money" v-if="ruleForm.goods_mode==2" placeholder="请输入物流配送金额" class="listing_input"></el-input>
|
|
</el-form-item>
|
|
<div class="listing_title">挂牌费用说明</div>
|
|
<el-form-item label="交付方式" prop="serial_img">
|
|
<el-radio v-model="ruleForm.pay_type" :label="1">支付宝支付</el-radio>
|
|
<el-radio v-model="ruleForm.pay_type" :label="2">网银支付</el-radio>
|
|
</el-form-item>
|
|
</el-form>
|
|
<div class="footer">
|
|
<button class="submit" @click="submit">提交资料</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { mavonEditor } from 'mavon-editor'
|
|
import 'mavon-editor/dist/css/index.css'
|
|
import {get_asset_type,getProvince,getCity,getArea,cartellino,getPrice} from '../../../api/index'
|
|
export default {
|
|
data(){
|
|
return{
|
|
host:'http://wenhua.xingtongworld.com',
|
|
action:'http://wenhua.xingtongworld.com/api/Index/uploadimg',
|
|
query:{
|
|
id:'',
|
|
// name:''
|
|
},
|
|
options:[],
|
|
props: {
|
|
value:'id',
|
|
label:'name',
|
|
leaf:'is_son',
|
|
emitPath:false
|
|
},
|
|
province:[],
|
|
city:[],
|
|
area:[],
|
|
price:[],
|
|
ruleForm:{
|
|
serial_name:'',
|
|
serial_img:[],
|
|
asset_type_id:'',
|
|
province:null,
|
|
city:'',
|
|
area:'',
|
|
serial_content:'',
|
|
else_serial_file:[],
|
|
decision:1,
|
|
decision_case:'',
|
|
cartellino_time_id:'',
|
|
cartellino_type:1,
|
|
price:'',
|
|
asset_unit:'',
|
|
count:'',
|
|
pay_count:'',
|
|
pay_mode:1,
|
|
buy_mode:1,
|
|
goods_mode:1,
|
|
express_money:'',
|
|
start_auction_money:'',
|
|
bidding_money:'',
|
|
pay_type:1,
|
|
},
|
|
rules:{
|
|
serial_img: [
|
|
{ required: true, message: '请上传资产图片', trigger: 'blur' },
|
|
],
|
|
serial_name: [
|
|
{ required: true, message: '请输入资产名称', trigger: 'blur' },
|
|
],
|
|
asset_type_id: [
|
|
{ required: true, message: '请选择资产类型', trigger: 'blur' },
|
|
],
|
|
province: [
|
|
{ required: true, message: '请选择资产所在地（省）', trigger: 'blur' },
|
|
],
|
|
serial_content: [
|
|
{ required: true, message: '请输入资产基本情况', trigger: 'blur' },
|
|
],
|
|
else_serial_file: [
|
|
{ required: true, message: '请上传其他资产材料', trigger: 'blur' },
|
|
],
|
|
decision: [
|
|
{ required: true, message: '请选择内部决策情况', trigger: 'blur' },
|
|
],
|
|
cartellino_time_id: [
|
|
{ required: true, message: '请选择挂牌时长', trigger: 'blur' },
|
|
],
|
|
cartellino_type: [
|
|
{ required: true, message: '请选择挂牌类型', trigger: 'blur' },
|
|
],
|
|
price: [
|
|
{ required: true, message: '请输入资产单价', trigger: 'blur' },
|
|
],
|
|
asset_unit: [
|
|
{ required: true, message: '请输入资产单位', trigger: 'blur' },
|
|
],
|
|
count: [
|
|
{ required: true, message: '请输入挂牌数量', trigger: 'blur' },
|
|
],
|
|
pay_count: [
|
|
{ required: true, message: '请输入购买时单次至少购买数量', trigger: 'blur' },
|
|
],
|
|
pay_mode: [
|
|
{ required: true, message: '请选择付款方式', trigger: 'blur' },
|
|
],
|
|
buy_mode: [
|
|
{ required: true, message: '请选择交易方式', trigger: 'blur' },
|
|
],
|
|
goods_mode: [
|
|
{ required: true, message: '请选择交付方式', trigger: 'blur' },
|
|
],
|
|
pay_type: [
|
|
{ required: true, message: '请选择支付方式', trigger: 'blur' },
|
|
],
|
|
start_auction_money: [
|
|
{ required: true, message: '请输入起拍单价', trigger: 'blur' },
|
|
],
|
|
bidding_money: [
|
|
{ required: true, message: '请输入竞价金额', trigger: 'blur' },
|
|
],
|
|
},
|
|
}
|
|
},
|
|
components: {
|
|
mavonEditor
|
|
},
|
|
created(){
|
|
this.get_asset_type();
|
|
this.getProvince();
|
|
this.getPrice()
|
|
},
|
|
methods:{
|
|
getPrice(){
|
|
getPrice().then(res => {
|
|
console.info(res)
|
|
if(res.code==100){
|
|
this.price=res.data
|
|
}
|
|
})
|
|
},
|
|
changeDate(type){
|
|
console.info(type)
|
|
if(type==0){
|
|
this.getCity()
|
|
}else if(type==1){
|
|
this.getArea()
|
|
}
|
|
},
|
|
getProvince(){
|
|
getProvince().then(res => {
|
|
console.info(res)
|
|
if(res.code==100){
|
|
this.province=res.list
|
|
}
|
|
})
|
|
},
|
|
getCity(){
|
|
let data={
|
|
code:this.ruleForm.province
|
|
}
|
|
getCity(data).then(res=>{
|
|
console.info(res)
|
|
if(res.code==100){
|
|
this.city=res.list
|
|
}
|
|
})
|
|
},
|
|
getArea(){
|
|
let data={
|
|
code:this.ruleForm.city
|
|
}
|
|
getArea(data).then(res=>{
|
|
console.info(res)
|
|
if(res.code==100){
|
|
this.area=res.list
|
|
}
|
|
})
|
|
},
|
|
get_asset_type(){
|
|
get_asset_type().then(res=>{
|
|
console.info(res)
|
|
if(res.code==100){
|
|
this.options=res.data
|
|
}
|
|
})
|
|
},
|
|
submit(){
|
|
console.info(this.ruleForm)
|
|
this.$refs["ruleForm1"].validate((valid) => {
|
|
if(valid){
|
|
cartellino(this.ruleForm).then(res=>{
|
|
console.info(res)
|
|
if(res.code==100){
|
|
this.$message.success('上传成功！请等待审核~');
|
|
}else{
|
|
this.$message.error(res.msg);
|
|
}
|
|
})
|
|
}
|
|
})
|
|
},
|
|
// 将图片上传到服务器，返回地址替换到md中
|
|
$imgAdd(pos, $file){
|
|
var formdata = new FormData();
|
|
formdata.append('file', $file);
|
|
// 这里没有服务器供大家尝试，可将下面上传接口替换为你自己的服务器接口
|
|
this.$axios({
|
|
url: this.action,
|
|
method: 'post',
|
|
data: formdata,
|
|
headers: { 'Content-Type': 'multipart/form-data' },
|
|
}).then((url) => {
|
|
this.$refs.md.$img2Url(pos, url);
|
|
})
|
|
},
|
|
change(value, render){
|
|
// render 为 markdown 解析后的结果
|
|
this.html = render;
|
|
},
|
|
fileChange(file){
|
|
const typeArr = ['image/png', 'image/gif', 'image/jpeg', 'image/jpg'];
|
|
const isJPG = typeArr.indexOf(file.raw.type) !== -1;
|
|
const isLt3M = file.size / 1024 / 1024 < 10;
|
|
if (!isJPG) {
|
|
this.$message.error('只能是图片!');
|
|
this.$refs.upload.clearFiles();
|
|
return;
|
|
}
|
|
if (!isLt3M) {
|
|
this.$message.error('上传图片大小不能超过 10MB!');
|
|
this.$refs.upload.clearFiles();
|
|
return;
|
|
}
|
|
},
|
|
overstep(){
|
|
this.$message.error('只能上传一张图片！');
|
|
},
|
|
handleAvatarSuccess(type,res,index) {
|
|
console.info(res)
|
|
if(res.code == 1){
|
|
let url=this.host + res.data.img_url;
|
|
if(type==0){
|
|
console.info(index)
|
|
if(this.ruleForm.serial_img[index]){
|
|
// this.ruleForm.serial_img[index]=url
|
|
this.$set(this.ruleForm.serial_img,index,url)
|
|
}else{
|
|
this.ruleForm.serial_img.push(url)
|
|
}
|
|
console.info(this.ruleForm.serial_img)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
.body{
|
|
margin-top: 15px;
|
|
}
|
|
.title{
|
|
color: #333333;
|
|
font-size: 18px;
|
|
margin-bottom: 15px;
|
|
}
|
|
.listing_title1{
|
|
display: flex;
|
|
align-items: center;
|
|
width: 800px;
|
|
justify-content: space-between;
|
|
margin-bottom: 15px;
|
|
}
|
|
.listing_title{
|
|
background-color: #C94D4D;
|
|
color: white;
|
|
font-size: 16px;
|
|
height: 40px;
|
|
line-height: 40px;
|
|
padding-left: 20px;
|
|
}
|
|
.upload_file{
|
|
margin: 15px 0;
|
|
}
|
|
.listing_flex{
|
|
display: flex;
|
|
}
|
|
.listing_editor{
|
|
min-height: 500px;
|
|
width: 800px;
|
|
border: 1px solid #D1D1D1;
|
|
}
|
|
.listing_title1_right{
|
|
width: 160px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.listing_button{
|
|
width: 70px;
|
|
height: 32px;
|
|
border-radius: 5px;
|
|
border: 1px solid #E7B0B0;
|
|
background: #F3D8D8;
|
|
font-size: 14px;
|
|
color: rgba(201, 76, 76, 0.898039215686275);
|
|
}
|
|
.listing_upload{
|
|
display: flex;
|
|
margin-top: 10px;
|
|
}
|
|
.select_type{
|
|
width: 800px;
|
|
height: 50px;
|
|
color: #7F7F7F;
|
|
padding-left: 15px;
|
|
line-height: 50px;
|
|
background-color: #FDF8F8;
|
|
border: 1px solid #F3D8D8;
|
|
margin-bottom: 10px;
|
|
}
|
|
.listing_tips{
|
|
font-size: 14px;
|
|
color: rgba(127, 127, 127, 0.898039215686275);
|
|
}
|
|
.listing_tips:hover{
|
|
color: #D85E5E;
|
|
}
|
|
.avatar_p{
|
|
font-size: 14px;
|
|
color: #7F7F7F;
|
|
}
|
|
.serial_name{
|
|
width: 800px;
|
|
}
|
|
.select_city{
|
|
width: 200px;
|
|
margin-right: 15px;
|
|
}
|
|
.select_city1{
|
|
width: 400px;
|
|
}
|
|
.listing_input{
|
|
width: 300px;
|
|
}
|
|
.footer{
|
|
text-align: center;
|
|
margin-top: 50px;
|
|
}
|
|
.submit{
|
|
width: 340px;
|
|
height: 40px;
|
|
background: -moz-linear-gradient(top, #F8D89F 0%, #D98282 100%);
|
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F8D89F), color-stop(100%,#D98282));
|
|
background: -webkit-linear-gradient(top, #F8D89F 0%,#D98282 100%);
|
|
background: -o-linear-gradient(top, #F8D89F 0%,#D98282 100%);
|
|
background: -ms-linear-gradient(top, #F8D89F 0%,#D98282 100%);
|
|
background: linear-gradient(to bottom, #F8D89F 0%,#D98282 100%);
|
|
font-size: 14px;
|
|
color: #FFFFFF;
|
|
border: none;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
|
|
|
|
.avatar-uploader{
|
|
margin-right: 15px;
|
|
}
|
|
.ruleForm>>>.el-form-item__label{
|
|
padding-left: 20px;
|
|
text-align: right;
|
|
}
|
|
.avatar-uploader >>> .el-upload--text{
|
|
width: 120px;
|
|
height: 120px;
|
|
/* line-height: 120px; */
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.avatar-uploader .el-upload {
|
|
border: 1px dashed #d9d9d9;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.avatar-uploader .el-upload:hover {
|
|
border-color: #409EFF;
|
|
}
|
|
.avatar-uploader-icon {
|
|
font-size: 40px;
|
|
color: #8c939d;
|
|
width: 40px;
|
|
height: 40px;
|
|
line-height: 40px;
|
|
text-align: center;
|
|
color: #CB5151;
|
|
}
|
|
.avatar-uploader img{
|
|
width: 120px;
|
|
height: 120px;
|
|
line-height: 120px;
|
|
}
|
|
</style>
|
|
|