jiace-admin/src/views/asdm/innovate/index.vue

<template>
  <div class="app-container">
    <el-card shadow="never">
      <i class="el-icon-tickets"></i>
      <span>数据列表</span>
      <el-button class="mb15" style="float: right" @click="open" size="mini" type="primary">
        添加创新
      </el-button>
    </el-card>
    <el-table style="width: 100%" class="table-container" :data="rotationList">
      <el-table-column
        label="序号"
        align="center"
        type="index"
      ></el-table-column>
      <el-table-column label="创新图片" prop="pic" align="center">
        <template slot-scope="scope">
        <el-image
          style="height: 100px"
          :src="scope.row.pic"
          fit="cover">
        </el-image>
      </template>
      </el-table-column>
      <el-table-column
        label="创新名称"
        align="center"
        prop="title"
      ></el-table-column>
      <el-table-column
        label="排序"
        align="center"
        prop="sort"
      ></el-table-column>
      <el-table-column
        label="创建时间"
        align="center"
        prop="createTime"
      ></el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button @click="handleUpdate(scope.row)" type="text" size="small"
            >编辑</el-button
          >
          <el-button @click="handleDelete(scope.row.id)" type="text" size="small"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <el-dialog
      title="创新服务"
      :visible.sync="dialogVisible"
      width="50%">
        <el-form
        :model="ruleForm"
        ref="ruleForm"
        :rules="rules"
        label-width="80px"
      >
        <el-form-item label="创新名称" prop="title">
          <el-input placeholder="请输入" v-model="ruleForm.title"></el-input>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input placeholder="请输入" v-model="ruleForm.sort"></el-input>
        </el-form-item>
        <el-form-item label="详情" prop="details">
          <editor v-model="ruleForm.details" :min-height="192" />
        </el-form-item>
        <el-form-item label="创新图片" prop="pic">
          <multi-upload v-model="selectProductPics" :maxCount="1"></multi-upload>
          <span style="color:#999">● 建议上传295*188分辨率的图片</span>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
// import { getRotationList,addRotation, deleteRotation, updateRotation } from '@/api/rotation';
import { innovateList,handleInnovate, innovateDelete, updateRotation } from '@/api/asdm/partner';
import MultiUpload from '@/components/Upload/multiUpload';
import Editor from '@/components/Editor';
const defaultParams = {
  title:'',
  sort: '0',
  details:'',
  pic: ''
};
export default {
   components: {
    MultiUpload,
    Editor
  },
  data() {
    return {
      queryParams: {
        title:undefined,
        pageNum: 1,
        pageSize: 10
      },
      total: 0,
      rotationList: [],
      dialogVisible: false,
      ruleForm: Object.assign({},defaultParams),
      rules: {
        title: [{ required: true, message: '请输入', trigger: 'blur' }],
        sort: [{ required: true, message: '请输入', trigger: 'blur' }],
        details: [{ required: true, message: '请输入', trigger: 'blur' }],
        pic: [{ required: true, message: '请上传', trigger: 'blur' }]
      }
    };
  },
  computed: {
    //主图和画册图片
    selectProductPics: {
      get: function() {
        let pics = [];
        if (
          this.ruleForm.pic === undefined ||
          this.ruleForm.pic == null ||
          this.ruleForm.pic === ''
        ) {
          return pics;
        }
        pics.push(this.ruleForm.pic);
        if (
          this.ruleForm.albumPics === undefined ||
          this.ruleForm.albumPics == null ||
          this.ruleForm.albumPics === ''
        ) {
          return pics;
        }
        let albumPics = this.ruleForm.albumPics.split(',');
        for (let i = 0; i < albumPics.length; i++) {
          pics.push(albumPics[i]);
        }
        return pics;
      },
      set: function(newValue) {
        if (newValue == null || newValue.length === 0) {
          this.ruleForm.pic = null;
          this.ruleForm.albumPics = null;
        } else {
          this.ruleForm.pic = newValue[0];
          // this.ruleForm.picList = newValue;
          this.ruleForm.albumPics = '';
          if (newValue.length > 1) {
            for (let i = 1; i < newValue.length; i++) {
              this.ruleForm.albumPics += newValue[i];
              if (i !== newValue.length - 1) {
                this.ruleForm.albumPics += ',';
              }
            }
          }
        }
      }
    }
  },
  methods: {
    getList() {
      innovateList(this.queryParams).then(({ data }) => {
        this.rotationList = data.list;
        this.total = data.total
      });
    },
    open(){
      this.ruleForm = Object.assign({}, defaultParams),
      this.dialogVisible = true
    },
    handleUpdate(row){
      this.ruleForm = Object.assign({}, row)
      this.dialogVisible = true
    },
    submitForm(formName){
      this.$refs[formName].validate(valid=>{
        if(valid){
          handleInnovate(this.ruleForm).then(res=>{
              this.msgSuccess(res.data)
              this.ruleForm = {
                url: '',
                pic: ''
              }
              this.getList()
              this.dialogVisible = false
            })
          // if(this.ruleForm.id){
          //   updateRotation(this.ruleForm).then(res=>{
          //     this.msgSuccess(res.data)
          //     this.ruleForm = {
          //       url: '',
          //       pic: ''
          //     }
          //     this.getList()
          //     this.dialogVisible = false
          //   })
          // }else{
          //   handleInnovate(this.ruleForm).then(res=>{
          //     this.msgSuccess(res.data)
          //     this.ruleForm = {
          //       url: '',
          //       pic: ''
          //     }
          //     this.getList()
          //     this.dialogVisible = false
          //   })
          // }
        }
      })
      // this.dialogVisible = false
    },
    /** 删除按钮操作 */
    handleDelete(id) {
      this.$confirm('确认删除该轮播图?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(function() {
          return innovateDelete({id});
        })
        .then(() => {
          this.getList();
          this.msgSuccess('删除成功');
        });
    }
  },
  created() {
    this.getList();
  }
};
</script>
<style lang="scss" scoped>
// .el-tag + .el-tag {
//   margin-left: 10px;
// }
</style>