Smart_platform_ui/src/views/ServiceLtems/detailsPage_1.vue

<template>
  <div>
    <div class="borderless">
      <div class="customer-head">
        <div class="customer-back">
          <el-button type="danger" style="border: none;background: none;color: red" icon="el-icon-arrow-left" @click="backToList">
            返回列表
          </el-button>
        </div>
        <div class="add-customer-btn">
            <el-button type="primary" size="small" @click="addnew">添加分类</el-button>
          <el-button type="primary" size="small" @click="editCustomer">
            保存数据
          </el-button>
        </div>
      </div>
      <trade-card title="项目数据" style="margin: 60px 300px 0;">
          <div class="flexbox">
              <div class="flexImg" @click="excelBoxfun">
                  <img v-if="outerform.url" style="width: 100%;height: 100%" :src="outerform.url" alt="">
                  <i v-else class="el-icon-plus"></i>
              </div>
              <div class="flexText">
                  <el-form ref="form" :model="outerform" label-width="80px">
                      <el-form-item label="项目名称">
                          <el-input size="small" v-model="outerform.cname"></el-input>
                      </el-form-item>
                      <el-form-item label="备注">
                          <el-input type="textarea" size="small" v-model="outerform.cname"></el-input>
                      </el-form-item>
                  </el-form>
              </div>
          </div>
      </trade-card>

        <el-card class="box-card" style="margin: 10px 5px" v-for="item in cardData">
            <div class="flexbox">
                <div class="flexImg_subset flexImg">
                    <i class="el-icon-plus"></i>
                </div>

                <div class="flexText_subset">
                    <el-form ref="form" :model="outerform" label-width="80px">
                        <el-form-item label="项目名称">
                            <el-input size="small" v-model="outerform.cname"></el-input>
                        </el-form-item>
                        <el-form-item label="备注">
                            <el-input type="textarea" size="small" v-model="outerform.remarks"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
            </div>

            <div class="subset_product">
                <div class="addBox">新增产品</div>

                <div style="display: flex;flex-wrap: wrap;justify-content: space-between;">
                    <div class="subset_productBox flexbox" v-for="item in [1,2,3,4,5]">
                        <div class="subset_productBox_left flexImg">
                            <i class="el-icon-plus"></i>
                        </div>
                        <div class="subset_productBox_right">
                            <div class="subset_productBox_title">标题</div>
                            <div class="subset_productBox_img flexImg">
                                <i class="el-icon-plus"></i>
                            </div>
                            <div class="subset_productBox_button">
                                <div class="productBox_view">查看</div>
                                <div class="productBox_edit">编辑</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </el-card>
    </div>


      <el-dialog
          title="上传附件"
          append-to-body
          :visible.sync="excelBox"
          width="555px"
          :close-on-click-modal="false"
          v-dialog-drag
      >
          <el-upload
              class="upload-demo"
              drag
              style="text-align: center"
              ref="upload"
              :action="action"
              :headers="headers"
              :on-success="onSuccess"
              multiple
          >
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              <div class="el-upload__tip" slot="tip">
                  如上传文件过大，请耐心等待上传成功
              </div>
          </el-upload>
      </el-dialog>
      <div style="height: 60px"></div>
  </div>
</template>

<script>
import goodsType from '@/components/goodsType/index'
import {getToken} from "@/util/auth";
export default {
  name: "index",
  data() {
    return {
        // 最大的对象
        outerform:{},
        // 附件弹窗
        excelBox:false,
        action: "/api/blade-resource/oss/endpoint/put-file",
        headers: { "Blade-Auth": "Bearer " + getToken() },


        cardData:[{
          name:'扒台机'
        },{
            name:'纯水机'
        }
        ]
    };
  },
  components: {
    goodsType
  },
  props: {
    detailData: {
      type: Object
    }
  },
  async created() {
    // if (this.detailData.id) {
    //   this.projectGoodsDetailfun(this.detailData.id);
    // }
    // if (this.detailData.status == 1) {
    //   this.option.disabled = true;
    // }
  },
  methods: {
      // 添加分类
      addnew(){

      },
      // 保存数据
      editCustomer(){

      },
      excelBoxfun(){
          this.excelBox = true
      },
      //新增上传成功
      onSuccess(response, file, fileList) {
          console.log(response,file,fileList,315)
          this.excelBox = false
          this.outerform.url = response.data.link
          this.outerform.fileName = response.data.originalName
          // this.$refs.crud.rowCellAdd({
          //     fileName: response.data.originalName,
          //     url: response.data.link
          // });
          // this.uploadCount++;
          // if (this.uploadCount === fileList.length) {
          //     this.$refs.upload.clearFiles();
          //     this.excelBox = false;
          //     this.uploadCount = 0;
          // }
      },
    //返回列表
    backToList() {
      this.$emit("goBack");
    }
  },
};
</script>

<style lang="scss" scoped>
    .flexbox {
        display: flex;
        align-items: center;
        .flexImg {
            width: 200px;
            height: 200px;
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 30px;
            color: #d9d9d9;
        }
        .flexText {
            width: calc(100% - 200px);
        }
        .flexImg_subset {
            width: 160px;
            height: 160px;
        }
        .flexText_subset {
            width: calc(100% - 160px);
        }
        .subset_productBox_left {
            width: 140px;
            height: 140px;
        }
        .subset_productBox_right {
            margin-left: 20px;
            width: calc(100% - 140px);
            .subset_productBox_title {
                font-size: 18px;
                color: #000;
            }
            .subset_productBox_img {
                width: 100px;
                height: 100px;
            }
            .subset_productBox_button {
                display: flex;
                align-items: center;
                justify-content: space-around;
                font-size: 14px;
                margin-top: 10px;
                .productBox_view {
                    padding: 4px 10px;
                    border-radius: 6px;
                    border: 1px solid #1e9fff;
                    color: #1e9fff;
                }
                .productBox_edit {
                    padding: 4px 10px;
                    border-radius: 6px;
                    border: 1px solid #1e9fff;
                    color: #1e9fff;
                }
            }
        }
    }
    .subset_product {
        margin-top: 20px;
    }
    .subset_productBox {
        width: 24%;
        box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.2);
        padding: 10px 15px;
        box-sizing: border-box;
        margin-bottom: 20px;
    }
    .addBox {
        width: 80px;
        height: 30px;
        border-radius: 4px;
        background: #1e9fff;
        color: #fff;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 10px;
    }
</style>