yos_web/src/optionSystem/executeManage/detail/index.vue

<template>
  <div>
    <basicDetails
      ref="details"
      :titleText="mainData.itemname"
      :oldFormPath="{ edit: 'optionSystem/executeManage/modules' }"
      :editData="mainData"
      :mainAreaData="mainAreaData"
      turnPageId="2024060514063602"
      delApiId="2024060514040602"
      idname="itemid"
      ownertable="plm_item"
      tags=""
      :tabs="['基本信息']"
      :statusCheck="[{key:'status',value:'审核'}]"
      @pageChange="pageChange"
      @onEditSuccess="queryMainData($route.query.id)"
    >
      <div slot="customOperation">
        <customBtn
          class="inline-16"
          btnName="审核"
          message="确定审核当前执行器吗?"
          idName="2024060514051502"
          keyName="itemids"
          :id="[$route.query.id]"
          :paramData="[{key:'ischeck',value:1}]"
          @onSuccess="queryMainData()"
          v-if="mainData.status == '新建' && tool.checkAuth($route.name,'check')"
        />
        <customBtn
          class="inline-16"
          btnName="反审核"
          message="确定反审核当前执行器吗?"
          idName="2024060514051502"
          keyName="itemids"
          :id="[$route.query.id]"
          :paramData="[{key:'ischeck',value:0}]"
          @onSuccess="queryMainData()"
          v-if="mainData.status == '审核' && tool.checkAuth($route.name,'nocheck')"
        />
      </div>
      <div slot="slot0">
        <DetailInfo :more="true" :data="detailInfo"></DetailInfo>
      </div>
    </basicDetails>
  </div>
</template>

<script>
import DetailInfo from "@/components/detailInfo/index";
export default {
  name: "detail",
  components:{DetailInfo},
  data() {
    return {
      mainData: {},
      mainAreaData: {},
      detailInfo: [],
      bodystructure: [],
      actuatordrivetype:[],
      actuatortype:[],
      func: [],
    };
  },
  provide() {
    return {
      bodystructure: () => {
        return this.bodystructure;
      },
      actuatordrivetype: () => {
        return this.actuatordrivetype;
      },
      actuatortype: () => {
        return this.actuatortype;
      },
      func: () => {
        return this.func;
      },
    };
  },
  methods: {
    async queryMainData(id) {
      const res = await this.$api.requested({
        id:2024060513424502,
        content: {
          itemid: this.$route.query.id,
        },
      });
      this.mainData = res.data;
      console.log(this.mainData,'详情');
      this.changeDataStructure();
    },
    changeDataStructure() {
        let that = this
      this.mainAreaData = [
        {
          label: "执行器料号",
          value: this.mainData.itemno,
        },
        {
          label: "名称",
          value: this.mainData.itemname,
        },
        {
          label: "转速",
          value: this.mainData.speed,
        },
        {
          label: "法兰号",
          value: this.mainData.flh.join('-'),
        },
        {
          label: "品牌",
          value: this.mainData.actuatorbrand,
        },
        {
          label: "系列",
          value: this.mainData.actuatorseries,
        },
        {
          label: "牌价",
          value: this.tool.formatAmount(this.mainData.marketprice,2),
        },
        {
          label: "状态",
          value:this.mainData.status,
          style:function () {
            let style = {}
            switch (that.mainData.status) {
              case '新建':
                style = {color:"#000000"}
                break;
              case '审核':
                style = {color:"#52C41A"}
                break;
              default:
                break;
            }
            return style
          }
        },
      ];
      this.detailInfo = [
        {
          title: "基本信息",
          info: [
            {
              label: "执行器料号",
              value: this.mainData.itemno,
            },
            {
              label: "名称",
              value: this.mainData.itemname,
            },
            {
              label: "执行器类型",
              value: this.mainData.actuatortype,
            },
            {
              label: "执行器驱动类型",
              value: this.mainData.actuatordrivetype,
            },
            {
              label: "电源电压",
              value: this.mainData.supplyvoltage,
            },
            {
              label: "转速",
              value: this.mainData.speed,
            },
            {
              label: "法兰号",
              value: this.mainData.flh.join('-'),
            },
            {
              label: "重量",
              value: this.mainData.weight,
            },
            {
              label: "说明",
              value: this.mainData.remarks,
            },
            {
              label: "品牌",
              value: this.mainData.actuatorbrand,
            },
            {
              label: "型号",
              value: this.mainData.model,
            },
            {
              label: "手轮速比",
              value: this.mainData.handwheelratio,
            },
            {
              label: "扭矩",
              value: this.mainData.torque,
            },
            {
              label: "额定功率",
              value: this.mainData.ratedpower,
            },
            {
              label: "额定电流",
              value: this.mainData.ratedcurrent,
            },
            {
              label: "90°最大运行时间",
              value: this.mainData.maxruntime,
            },
            {
              label: "圆阀杆最大直径",
              value: this.mainData.maxrounddiameter,
            },
            {
              label: "方阀杆最大宽度",
              value: this.mainData.maxsquarewidth.join('-'),
            },
            {
              label: "结构",
              value: this.mainData.bodystructure,
            },
            {
              label: "功能",
              value: this.mainData.func,
            },
            {
              label: "备注",
              value: this.mainData.remarks,
            },
            {
              label: "牌价",
              value: this.tool.formatAmount(this.mainData.marketprice,2),
            },
            {
              label: "状态",
              value:this.mainData.status,
              style:function () {
                let style = {}
                switch (that.mainData.status) {
                  case '新建':
                    style = {color:"#000000"}
                    break;
                  case '审核':
                    style = {color:"#52C41A"}
                    break;
                  default:
                    break;
                }
                return style
              }
            },
          ],
        },
        {
          title: "系统信息",
          info: [
            { label: "创建人", value: this.mainData.createby },
            { label: "创建时间", value: this.mainData.createdate },
            { label: "最近编辑人", value: this.mainData.changeby },
            { label: "最近编辑时间", value: this.mainData.changedate },
            { label: "审核人", value: this.mainData.checkby },
            { label: "审核时间", value: this.mainData.checkdate },
          ],
        },
      ];
      console.log(this.mainAreaData);
    },
    optionList() {
      this.$store.dispatch("optiontypeselect", "bodystructure").then((res) => {
        this.bodystructure = res.data;
        console.log(this.bodystructure, "结构");
      });
      this.$store.dispatch("optiontypeselect", "func").then((res) => {
        this.func = res.data;
        console.log(this.func, "功能");
      });
      this.$store.dispatch("optiontypeselect", "actuatortype").then((res) => {
        this.actuatortype = res.data;
        console.log(this.actuatortype, "执行器类型");
      });
      this.$store.dispatch("optiontypeselect", "actuatordrivetype").then((res) => {
        this.actuatordrivetype = res.data;
        console.log(this.actuatordrivetype, "执行器驱动类型");
      });
    },
    // 监听切换数据,上一页,下一页
    pageChange(id, rowindex, tabIndex) {
      this.flag = false;
      tabIndex = this.$route.query.tabIndex;
      this.$router.replace({
        path: "/executeDetail",
        query: { id: id, rowindex: rowindex, tabIndex: tabIndex },
      });
      this.queryMainData(id);
    },
    onSuccess() {
      this.visible = false;
      this.queryMainData(this.$route.query.id);
      this.$emit("onSuccess");
    },
  },
  created() {
    this.optionList()
    this.queryMainData(this.$route.query.id)
  },
};
</script>

<style scoped>
</style>