|
|
@@ -0,0 +1,350 @@
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .content{
|
|
|
+ display:flex;
|
|
|
+ padding:0;
|
|
|
+ .content-item{
|
|
|
+ flex:1;
|
|
|
+ padding:20px;
|
|
|
+ &.middle{
|
|
|
+ border-left:2px solid #D8D8D8;
|
|
|
+ border-right:2px solid #D8D8D8;
|
|
|
+ }
|
|
|
+ &.right,&.middle{
|
|
|
+ flex:2;
|
|
|
+ }
|
|
|
+ .item-title{
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #666666;
|
|
|
+ margin-bottom:20px;
|
|
|
+ }
|
|
|
+ .el-row{
|
|
|
+ margin-top:20px;
|
|
|
+ }
|
|
|
+ .model{
|
|
|
+ width:80px;
|
|
|
+ height:80px;
|
|
|
+ display:flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-evenly;
|
|
|
+ &:hover{
|
|
|
+ cursor: pointer;
|
|
|
+ background:#F5FAFF;
|
|
|
+ }
|
|
|
+ img{
|
|
|
+ height:28px;
|
|
|
+ width:28px;
|
|
|
+ }
|
|
|
+ span{
|
|
|
+ font-size:14px;
|
|
|
+ color:#666666;
|
|
|
+ // margin-top:19px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-form{
|
|
|
+ margin-bottom:20px;
|
|
|
+ .el-form-item{
|
|
|
+ background:#F5FAFF;
|
|
|
+ padding:10px 20px;
|
|
|
+ margin-bottom:5px;
|
|
|
+ /deep/.el-form-item__label{
|
|
|
+ font-size:16px;
|
|
|
+ color:#666666;
|
|
|
+ }
|
|
|
+ /deep/.el-form-item__content{
|
|
|
+ margin-right:160px;
|
|
|
+ position:relative;
|
|
|
+ font{
|
|
|
+ position:absolute;
|
|
|
+ right:-145px;
|
|
|
+ top:0px;
|
|
|
+ color:#3895FE;
|
|
|
+ font-size: 12px;
|
|
|
+ span{
|
|
|
+ margin-left: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ div{
|
|
|
+ font-size:16px;
|
|
|
+ color:#333333;
|
|
|
+ }
|
|
|
+ .el-radio,.el-checkbox{
|
|
|
+ margin-right: 30px;
|
|
|
+ height: 30px;
|
|
|
+ line-height: 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.text{
|
|
|
+ /deep/.el-form-item__content{
|
|
|
+ margin-left:60px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 右边
|
|
|
+ .item-main{
|
|
|
+ margin:34px;
|
|
|
+ height:600px;
|
|
|
+ // background: #FFFFFF;
|
|
|
+ border: 1px solid #DDDDDD;
|
|
|
+ box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.13);
|
|
|
+ border-radius: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
|
|
+<template>
|
|
|
+ <section>
|
|
|
+ <p><span>信息管理></span>新增表单</p>
|
|
|
+ <div class="content">
|
|
|
+ <div class="content-item">
|
|
|
+ <div class='item-title'>表单组件</div>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span='12'>
|
|
|
+ <div class='model'>
|
|
|
+ <img src="../../assets/slt_small.png" alt="">
|
|
|
+ <span>单行文本</span>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span='12'>
|
|
|
+ <div class='model'>
|
|
|
+ <img src="../../assets/mlt_small.png" alt="">
|
|
|
+ <span>多行文本</span>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span='12'>
|
|
|
+ <div class='model'>
|
|
|
+ <img src="../../assets/radio_small.png" alt="">
|
|
|
+ <span>单选统计</span>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span='12'>
|
|
|
+ <div class='model'>
|
|
|
+ <img src="../../assets/checked_small.png" alt="">
|
|
|
+ <span>多选统计</span>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span='12'>
|
|
|
+ <div class='model'>
|
|
|
+ <img src="../../assets/upload_small.png" alt="">
|
|
|
+ <span>图片上传</span>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span='12'>
|
|
|
+ <div class='model'>
|
|
|
+ <img src="../../assets/file_small.png" alt="">
|
|
|
+ <span>文件上传</span>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ <div class="content-item middle">
|
|
|
+ <div class='item-title'>新建表单</div>
|
|
|
+ <el-form size="small" label-width="" label-position="">
|
|
|
+ <el-form-item label='姓名' class="text">
|
|
|
+ <el-input placeholder='请输入' ></el-input>
|
|
|
+ <font> <span>编辑</span> <span>删除</span></font>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label='手机' class='text'>
|
|
|
+ <el-input placeholder='请输入'></el-input>
|
|
|
+ <font> <span>编辑</span> <span>删除</span></font>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label='' class='noText'>
|
|
|
+ <div> 你最喜欢的主编是？</div>
|
|
|
+ <el-radio-group v-model="radio">
|
|
|
+ <el-radio :label="3">备选项1</el-radio>
|
|
|
+ <el-radio :label="6">备选项2</el-radio>
|
|
|
+ <el-radio :label="9">备选项3</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ <font> <span>编辑</span> <span>删除</span></font>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label='' class='noText'>
|
|
|
+ <div> 你最喜欢的主编是？</div>
|
|
|
+ <el-checkbox-group v-model="checkList">
|
|
|
+ <el-checkbox label="李小安1"></el-checkbox>
|
|
|
+ <el-checkbox label="李小安2"></el-checkbox>
|
|
|
+ <el-checkbox label="李小安3"></el-checkbox>
|
|
|
+ </el-checkbox-group>
|
|
|
+ <font> <span>编辑</span> <span>删除</span></font>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label='' class='noText'>
|
|
|
+ <div> 上传图片</div>
|
|
|
+ <el-upload
|
|
|
+ action="https://jsonplaceholder.typicode.com/posts/"
|
|
|
+ list-type="picture-card"
|
|
|
+ :on-preview="handlePictureCardPreview"
|
|
|
+ :on-remove="handleRemove">
|
|
|
+ <i class="el-icon-plus"></i>
|
|
|
+ </el-upload>
|
|
|
+ <font> <span>编辑</span> <span>删除</span></font>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label='' class='noText'>
|
|
|
+ <div> 上传文件</div>
|
|
|
+ <el-upload
|
|
|
+ class="upload-demo"
|
|
|
+ ref="upload"
|
|
|
+ action="https://jsonplaceholder.typicode.com/posts/"
|
|
|
+ :on-preview="handlePreview"
|
|
|
+ :on-remove="handleRemove"
|
|
|
+ :file-list="fileList"
|
|
|
+ :auto-upload="false">
|
|
|
+ <!-- <el-button slot="trigger" size="small" type="primary">选取文件</el-button> -->
|
|
|
+ <el-button style="margin-left: 10px;" size="small" type="primary" plain @click="submitUpload">添加文件</el-button>
|
|
|
+ <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
|
|
|
+ </el-upload>
|
|
|
+ <font> <span>编辑</span> <span>删除</span></font>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <el-button size="medium" type="primary" @click="dialogVisible = false">保存</el-button>
|
|
|
+ </div>
|
|
|
+ <div class="content-item right">
|
|
|
+ <div class='item-title'>效果预览</div>
|
|
|
+ <div class='item-main'>
|
|
|
+ <img src="" alt="">
|
|
|
+ <h5 align='center'>期刊读者满意度调查</h5>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data(){
|
|
|
+ return{
|
|
|
+ edit:0,
|
|
|
+ form:{name:'',page:1,page_size:20},
|
|
|
+ total:1,
|
|
|
+ list:[{name:'2333'}],
|
|
|
+ loading:false,
|
|
|
+ checkList:[],
|
|
|
+ input:'',
|
|
|
+ dialogVisible:false,
|
|
|
+ defaultProps:{},
|
|
|
+ data: [{
|
|
|
+ id: 1,
|
|
|
+ label: '一级 1'
|
|
|
+ }, {
|
|
|
+ id: 2,
|
|
|
+ label: '一级 2',
|
|
|
+ children: [{
|
|
|
+ id: 5,
|
|
|
+ label: '二级 2-1'
|
|
|
+ }, {
|
|
|
+ id: 6,
|
|
|
+ label: '二级 2-2'
|
|
|
+ }]
|
|
|
+ }],
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ gopage(size){
|
|
|
+ if(size){
|
|
|
+ this.form.page_size=size
|
|
|
+ }
|
|
|
+ this.form.page=this.$refs.pageButton.page
|
|
|
+ this.getData()
|
|
|
+ },
|
|
|
+ handleSelectionChange(val) {
|
|
|
+ this.multipleSelection = val;
|
|
|
+ },
|
|
|
+ gopage1(size){
|
|
|
+ if(size){
|
|
|
+ this.form1.page_size=size
|
|
|
+ }
|
|
|
+ this.form1.page=this.$refs.pageButton1.page
|
|
|
+ this.getJl()
|
|
|
+ },
|
|
|
+ open(data) {
|
|
|
+ this.dialogFormVisible=true;
|
|
|
+ this.message={...data}
|
|
|
+ },
|
|
|
+ download(){
|
|
|
+ let array=this.multipleSelection,ids=[];
|
|
|
+ for(let i=0;i<array.length;i++){
|
|
|
+ ids.push(array[i].id)
|
|
|
+ }
|
|
|
+ ids=ids.join(',')
|
|
|
+ this.$api.downloadMon({ids:ids}).then(res=>{
|
|
|
+ var elink = document.createElement('a');
|
|
|
+ let blob=new Blob([res.data], {type: 'application/vnd.ms-excel'});
|
|
|
+ let objUrl=URL.createObjectURL(blob);
|
|
|
+ console.log(res.headers['content-disposition'])
|
|
|
+ let file_name=res.headers['content-disposition'].split('=')[1];
|
|
|
+ elink.download = file_name;
|
|
|
+ elink.style.display = 'none';
|
|
|
+ elink.href = objUrl;
|
|
|
+ document.body.appendChild(elink);
|
|
|
+ elink.click();
|
|
|
+ document.body.removeChild(elink);
|
|
|
+ })
|
|
|
+ },
|
|
|
+ prview(id){
|
|
|
+ this.form1.enterprise_id=id;
|
|
|
+ this.getJl();
|
|
|
+ this.dialogFormVisible1=true
|
|
|
+ },
|
|
|
+ getJl(){
|
|
|
+ var parm=this.form1;
|
|
|
+ this.$api.getMonitjobList(parm).then(res=>{
|
|
|
+ this.data=res.data.data.list
|
|
|
+ this.total1=res.data.data.total
|
|
|
+
|
|
|
+ })
|
|
|
+ },
|
|
|
+ detail(id){
|
|
|
+ this.$router.push({ path: '/company/detail', query: { id: id,page:this.form.page,page_size:this.form.page_size } });
|
|
|
+ },
|
|
|
+ getData(){
|
|
|
+ var parm=this.form;
|
|
|
+ this.loading=true
|
|
|
+ this.$api.getEnterpriseList(parm).then(res=>{
|
|
|
+ this.list=res.data.data.list;
|
|
|
+ // list.forEach(item => {
|
|
|
+ // if(item.children.length>0){
|
|
|
+ // item.hasChildren=true
|
|
|
+ // }else{
|
|
|
+ // item.hasChildren=false
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ this.total=res.data.data.total
|
|
|
+ this.loading=false
|
|
|
+ this.area=this.store.area;
|
|
|
+ this.category=this.store.categorys;
|
|
|
+ })
|
|
|
+ },
|
|
|
+ del(id){
|
|
|
+ this.$confirm('确定删除吗', '提示', {
|
|
|
+ type: 'warning'
|
|
|
+ }).then(() => {
|
|
|
+ this.$api.deleteEnterprise({id:id}).then((res)=>{
|
|
|
+ this.$message({
|
|
|
+ message: '删除成功',
|
|
|
+ type: 'success'
|
|
|
+ })
|
|
|
+ this.getData()
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ permission(name){
|
|
|
+ let permissions=this.info.permissions||[];
|
|
|
+ let list=[];
|
|
|
+ for(let i=0;i<permissions.length;i++){
|
|
|
+ list.push(permissions[i].name)
|
|
|
+ }
|
|
|
+ if(list.indexOf(name)<0){
|
|
|
+ return false;
|
|
|
+ }else{
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ created(){
|
|
|
+
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
zt_yangl
