yos_web/src/optionSystem/selectOption/components/setOrder.vue

<template>
  <el-dialog
    :visible.sync="dialogFormVisible"
    width="1200px"
    append-to-body
    :show-close="false"
    :close-on-click-modal="true"
  >
    <table
      bgcolor="#FAFAFA"
      cellpadding="0"
      style="width: 100%"
      class="result"
      v-if="dialogFormVisible"
    >
      <tr style="width: 100px">
        <td class="title">{{ $t("选型单") }}</td>
        <td>
          <div class="descript">
            <div class="item" v-if="result.lectotypecfg.billno">
              <span style="color: #888888">{{ $t("选型单编号") }}：</span
              >{{ result.lectotypecfg.billno }}
            </div>
            <div class="item" v-if="result.lectotypecfg.createdate">
              <span style="color: #888888">{{ $t("选型时间") }}：</span
              >{{ result.lectotypecfg.createdate }}
            </div>
            <div class="item" v-if="result.lectotypecfg.status">
              <span style="color: #888888">{{ $t("状态") }}：</span>
              <span style="color: red; font-weight: bold">
                {{ result.lectotypecfg.status }}</span
              >
            </div>
          </div>
        </td>
      </tr>
      <tr style="width: 100px">
        <td class="title">{{ $t("光头") }}</td>
        <td>
          <div class="text1" style="margin-bottom: 8px">
            <el-tag style="margin-right: 10px" size="small" type="warning">{{
              result.主阀.actuatorbrand
            }}</el-tag>
            <span>{{ result.主阀.itemname }}</span>
          </div>
          <div class="descript">
            <div class="item" v-if="result.主阀.torque">
              <span style="color: #888888">{{ $t("料号") }}：</span
              >{{ result.主阀.itemno }}
            </div>
            <div class="item" v-if="result.主阀.caliber">
              <span style="color: #888888">{{ $t("公称通径") }}：</span
              >{{ result.主阀.caliber }}
            </div>
            <div class="item" v-if="result.主阀.nominalpressure">
              <span style="color: #888888">{{ $t("公称压力") }}：</span
              >{{ result.主阀.nominalpressure.join(",") }}
            </div>
            <div class="item" v-if="result.主阀.stemmaterial">
              <span style="color: #888888">{{ $t("阀杆材质") }}：</span
              >{{ result.主阀.stemmaterial }}
            </div>
            <div class="item" v-if="result.主阀.mainmaterial">
              <span style="color: #888888">{{ $t("主体材质") }}：</span
              >{{ result.主阀.mainmaterial }}
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <td class="title">{{ $t("执行器") }}</td>
        <td>
          <div class="text1" style="margin-bottom: 8px">
            <el-tag style="margin-right: 10px" size="small" type="warning">{{
              result.执行器.actuatorbrand
            }}</el-tag>
            <span
              >{{ result.执行器.model }}
              {{
                result.减速箱 && Object.keys(result.减速箱).length
                  ? ` + ${$t("减速箱")}：${result.减速箱.itemname}`
                  : ""
              }}</span
            >
          </div>
          <div
            v-if="result.执行器"
            class="text1"
            style="margin-bottom: 8px"
          ></div>
          <div class="descript" v-if="result.执行器">
            <div class="item" v-if="result.执行器.itemname">
              <span style="color: #888888">{{ $t("执行器名称") }}：</span
              >{{ result.执行器.itemname }}
            </div>
            <div class="item" v-if="result.执行器.bodystructure">
              <span style="color: #888888">{{ $t("执行器结构") }}：</span
              >{{ result.执行器.bodystructure }}
            </div>
            <div class="item" v-if="result.执行器.maxruntime">
              <span style="color: #888888">{{ $t("开关时间") }}：</span
              >{{ result.执行器.maxruntime }}(s)
            </div>
            <div class="item" v-if="result.执行器.speed">
              <span style="color: #888888">{{ $t("转速") }}：</span
              >{{ result.执行器.speed }}(rpm)
            </div>
            <div class="item" v-if="result.执行器.handwheelratio">
              <span style="color: #888888">{{ $t("减速比") }}：</span
              >{{ result.执行器.ratio }}
            </div>
            <div class="item" v-if="result.执行器.supplyvoltage">
              <span style="color: #888888">{{ $t("电压") }}：</span
              >{{ result.执行器.supplyvoltage }}(V)
            </div>
            <div class="item" v-if="result.执行器.ratedcurrent">
              <span style="color: #888888">{{ $t("电流") }}：</span
              >{{ result.执行器.ratedcurrent }}(A)
            </div>
            <div class="item" v-if="result.执行器.ratedpower">
              <span style="color: #888888">{{ $t("功率") }}：</span
              >{{ result.执行器.ratedpower }}(KW)
            </div>
            <div class="item" v-if="result.执行器.maxruntime">
              <span style="color: #888888">{{ $t("开关时间") }}：</span
              >{{ result.执行器.maxruntime }}(s)
            </div>
            <div
              class="item"
              v-if="
                result.执行器.actuatorsignal &&
                result.执行器.actuatorsignal.length
              "
            >
              <span style="color: #888888">{{ $t("信号类型") }}：</span
              >{{ result.执行器.actuatorsignal.join(",") }}
            </div>
          </div>
        </td>
      </tr>
      <tr v-if="result.辅件.length">
        <td class="title">{{ $t("辅件") }}</td>
        <td style="padding: 0">
          <tr style="border-bottom: 1px solid #dddddd" class="custom-table">
            <div style="color: #333333">{{ $t("定位器") }}</div>
            <div class="text1">
              <el-tag
                style="margin-right: 10px"
                size="small"
                type="warning"
                v-if="
                  result.辅件.filter((item) => item.othertype == '定位器')
                    .length
                "
                >{{
                  result.辅件.filter((item) => item.othertype == "定位器")[0]
                    .actuatorbrand
                }}</el-tag
              >
              <span>{{
                result.辅件.filter((item) => item.othertype == "定位器").length
                  ? result.辅件.filter((item) => item.othertype == "定位器")[0]
                      .model
                  : "-"
              }}</span>
            </div>
            <div style="color: #333333">{{ $t("电磁阀") }}</div>
            <div class="text1">
              <el-tag
                style="margin-right: 10px"
                size="small"
                type="warning"
                v-if="
                  result.辅件.filter((item) => item.othertype == '电磁阀')
                    .length
                "
                >{{
                  result.辅件.filter((item) => item.othertype == "电磁阀")[0]
                    .actuatorbrand
                }}</el-tag
              >
              <span>{{
                result.辅件.filter((item) => item.othertype == "电磁阀").length
                  ? result.辅件.filter((item) => item.othertype == "电磁阀")[0]
                      .model
                  : "-"
              }}</span>
            </div>
          </tr>
          <tr class="custom-table">
            <div style="color: #333333">{{ $t("限位开关") }}</div>
            <div class="text1">
              <el-tag
                style="margin-right: 10px"
                size="small"
                type="warning"
                v-if="
                  result.辅件.filter((item) => item.othertype == '限位开关')
                    .length
                "
                >{{
                  result.辅件.filter((item) => item.othertype == "限位开关")[0]
                    .actuatorbrand
                }}</el-tag
              >
              <span>{{
                result.辅件.filter((item) => item.othertype == "限位开关")
                  .length
                  ? result.辅件.filter(
                      (item) => item.othertype == "限位开关"
                    )[0].model
                  : "-"
              }}</span>
            </div>
            <div style="color: #333333">{{ $t("过滤减压阀") }}</div>
            <div class="text1">
              <el-tag
                style="margin-right: 10px"
                size="small"
                type="warning"
                v-if="
                  result.辅件.filter((item) => item.othertype == '过滤减压阀')
                    .length
                "
                >{{
                  result.辅件.filter(
                    (item) => item.othertype == "过滤减压阀"
                  )[0].actuatorbrand
                }}</el-tag
              >
              <span>{{
                result.辅件.filter((item) => item.othertype == "过滤减压阀")
                  .length
                  ? result.辅件.filter(
                      (item) => item.othertype == "过滤减压阀"
                    )[0].model
                  : "-"
              }}</span>
            </div>
          </tr>
        </td>
      </tr>
      <tr>
        <td class="title">{{ $t("成品料号") }}</td>
        <td class="text1">{{ result.itemno || "-" }}</td>
      </tr>
      <tr>
        <td class="title">{{ $t(result.itemno ? "牌价" : "预估价格") }}</td>
        <td class="text2">
          ￥{{ result.price ? tool.formatAmount(result.price, 2) : "xxxxxx" }}
        </td>
      </tr>
    </table>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      result: [],
      dialogFormVisible: false,
    };
  },
  methods: {
    onShow(id) {
      this.$api
        .requested({
          id: 2024081516054202,
          content: {
            sa_lectotypecfgid: id,
          },
        })
        .then((res) => {
          this.result = res.data;
          this.dialogFormVisible = true;
        });
    },
  },
  created() {},
};
</script>

<style scoped>
/deep/.el-dialog__header {
  display: none;
}
/deep/.el-dialog__body {
  padding: 5px !important;
}
.descript {
  font-size: 12px;
  color: red;
}
table,
td,
tr {
  border-collapse: collapse;
}
td {
  padding: 20px 20px;
}
table,
td {
  border: 1px solid #dddddd;
}
.result .title {
  font-family: Source Han Sans SC, Source Han Sans SC;
  font-weight: bold;
  font-size: 16px;
  color: #333333;
  padding: 34px 20px;
}
.custom-table {
  border: none;
  display: flex;
  height: 64px;
  align-items: center;
  align-content: center;
}
.custom-table div {
  border-right: 1px solid #dddddd;
  height: 100%;
  display: flex;
  align-items: center;
  align-content: center;
  padding-left: 20px;
}
.custom-table div:nth-child(1) {
  width: 120px;
}
.custom-table div:nth-child(2) {
  flex: 1;
}
.custom-table div:nth-child(3) {
  width: 120px;
}
.custom-table div:nth-child(4) {
  flex: 1;
}
.descript {
  display: flex;
}
.descript .item {
  font-family: Source Han Sans SC, Source Han Sans SC;
  font-weight: 400;
  font-size: 14px;
  color: #333333;
  margin-right: 40px;
}
.descript .item:last-child {
  margin-right: 0 !important;
}
.text1 {
  font-family: Source Han Sans SC, Source Han Sans SC;
  font-weight: bold;
  font-size: 16px;
  color: #3874f6;
}
.text2 {
  font-family: Source Han Sans SC, Source Han Sans SC;
  font-weight: bold;
  font-size: 16px;
  color: #e80000;
}
</style>