LiaoningYaopinIframe/src/views/firmContent/components/descriptionsbianji/index.vue

<template>
  <div class="my--descriptions" :class="changeStyle ? 'my--descriptionsChange' : ''">
    <el-descriptions class="margin-top" :column="column" :size="size" :border="border" :colon="!changeStyle"
      :labelClassName="width ? 'descriptions-labelWidth-style' : changeStyle ? 'descriptions-labelChange-style' : 'descriptions-label-style'"
      :contentClassName="width ? 'descriptions-contentWidth-style' : changeStyle ? 'descriptions-contentChange-style' : 'descriptions-content-style'">
      <el-descriptions-item v-for="item in tablist" :key="item.id" :span="item.span ? item.span : 1" v-if="item.value && urlA.leixing != 'ggfw'">
        <template slot="label">
          {{ item.label }}
        </template>
        <div class="mybox">
          <div v-show="!item.show" class="showcharacters">{{ item.value || "-" }}</div>
          <el-input v-model="item.value" placeholder="请输入" v-show="item.show" clearable @change="inputchang"></el-input>
          <el-button size="mini"
            v-show="urlA.leixing == 'ggfw' && (item.label == '工艺流程信息' || item.label == '处方信息' || item.label == '生产标准信息')"
            type="primary" @click="editBtn(item)">
            {{ item.show ? '确定' : '编辑' }}</el-button>
        </div>

      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>
<script>
import { mapState } from "vuex";

export default {
  name: 'myDescriptions',
  props: {
    descriptions: {
      type: Array,
      required: true
    },
    size: {
      type: String,
      default: 'mini'
    },
    column: {
      type: Number,
      default: 2
    },
    width: {
      type: Boolean,
      default: false,
    },
    border: {
      type: Boolean,
      default: true,
    },
    changeStyle: {
      type: Boolean,
      default: false,
    }
  },
  data() {
    return {
      input: "",
      inputShow: false,
      tablist: [],
      id: undefined
    }
  },
  methods: {
    async editBtn(item) {
      console.log(798, this.id);
      this.huoqulist(1)
      if (item.show) {
        let data = {}
        if (item.label == "工艺流程信息") {
          data = {
            "approveNo": this.urlA.data,
            "gylcxx": item.value,
            id: this.id
          }
        } else if (item.label == "处方信息") {
          data = {
            "approveNo": this.urlA.data,
            "cfxx": item.value,
            id: this.id
          }
        } else if (item.label == "生产标准信息") {
          data = {
            "approveNo": this.urlA.data,
            "scbzxx": item.value,
            id: this.id
          }
        }
        let requst = await this.$api.frimCenter.productInto(data)
        console.log(123, requst);
        console.log("确定");
      } else {
        console.log("编辑");

      }
      item.show = !item.show

    },
    inputchang(value) {

    },
    async huoqulist(type) {
      let requst = await this.$api.frimCenter.findByApproveNo({ approveNo: this.urlA.data })
      if (requst.code == 200 && requst.data) {
        let obj = requst.data
        console.log(8888, this.tablist);
        if (this.tablist[0].label == "工艺流程信息" && type == 0) {
          this.tablist[0].value = obj.gylcxx
        }
        if (this.tablist[0].label == "处方信息" && type == 0) {
          this.tablist[0].value = obj.cfxx
        }
        if (this.tablist[0].label == "生产标准信息" && type == 0) {
          this.tablist[0].value = obj.scbzxx
        }
        console.log(999, this.tablist);
        console.log(requst);
        this.id = requst.data.id
        console.log(152, this.id);

      }


    },
    fullName(item) {
      console.log(item);
    }
  },
  mounted() {
    this.tablist = this.descriptions
    this.huoqulist(0)
  },
  computed: {
    ...mapState({
      urlA: (state) => state.app.urlA,
    }),

  }
}

</script>
<style lang="scss" scoped>
@import "@/assets/styles/utils.scss";

.my--descriptions {
  ::v-deep .descriptions-label-style {
    background-color: #F5F7FA;
    font-size: vb(16);
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #6A6C6F;
    width: vw(246);
  }

  ::v-deep .descriptions-labelWidth-style {
    background-color: #F5F7FA;
    font-size: vb(16);
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #6A6C6F;
    width: vw(306);
  }

  ::v-deep .descriptions-content-style {
    font-size: vb(16);
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #292F38;
    width: vw(610);
  }

  ::v-deep .descriptions-contentWidth-style {
    font-size: vb(16);
    font-family: Source Han Sans CN;
    font-weight: 400;
    width: vw(450);
    color: #292F38;
  }
}

.my--descriptionsChange {
  background-color: #F7FAFC;
  padding: vh(25) 0;

  .margin-top {
    ::v-deep .el-descriptions__body {
      background-color: #F7FAFC;

      .descriptions-labelChange-style {
        background-color: #F7FAFC;
        font-size: vb(16);
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #6A6C6F;
        width: vw(246);
        display: inline-block;
        text-align: right;
      }

      .descriptions-contentChange-style {
        background-color: #F7FAFC;
        font-size: vb(16);
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #292F38;
        width: vw(610);
      }
    }
  }
}

::v-deep .el-descriptions--mini.is-bordered .el-descriptions-item__cell {
  padding: vh(15) vw(10);
}

.mybox {
  display: flex;
  align-items: center;
}

::v-deep.el-input--medium {
  width: vw(200);
  margin: vw(0) vw(10);

}

// 输入框外部
::v-deep .el-input__inner {
  height: vh(33);
}

// 输入框
::v-deep .el-input__suffix {
  height: vh(33);

}

// 叉号
::v-deep .el-input .el-input__suffix {
  .el-input__suffix-inner {
    .el-icon-circle-close.el-input__clear {
      line-height: vh(33);
      height: vh(33);
    }
  }
}

// 文字
.showcharacters {
  margin-right: vw(10);
}
</style>