anrui/yxt-as-ui/src/views/basicinformation/maintenanceitem/maintenanceitemInfo.vue

<template>
  <div class="app-container">
    <div v-show="viewState == 1">
      <div class="tab-header webtop">
        <div>{{ viewTitle }}</div>
        <div>
          <el-button type="info" size="small" @click="handleReturn()">关闭</el-button>
        </div>
      </div>
      <div class="listconadd">
        <el-form ref="form_obj" :model="formobj" :rules="rules" class="formaddcopy02">
          <el-row style="border-top: 1px solid #e0e3eb">
            <el-col :span="8">
              <div class="span-sty">项目名称</div>
              <el-form-item><span class="addinputInfo">{{ formobj.sitemName }}</span></el-form-item>
            </el-col>
            <el-col :span="8">
              <div class="span-sty">拼音缩写</div>
              <el-form-item><span class="addinputInfo">{{ formobj.sitemCode }}</span></el-form-item>
            </el-col>
            <el-col :span="8">
              <div class="span-sty">工种</div>
              <el-form-item><span class="addinputInfo">{{ formobj.serviceType }}</span></el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <div class="span-sty">科目</div>
              <el-form-item><span class="addinputInfo">{{ formobj.subjectName }}</span></el-form-item>
            </el-col>
            <el-col :span="8" class="tlineheightb">
              <div class="span-sty">车型</div>
              <el-form-item><span class="addinputInfo">{{ formobj.goodsModel }}</span></el-form-item>
            </el-col>
            <el-col :span="8">
              <div class="span-sty">厂家</div>
              <el-form-item><span class="addinputInfo">{{ formobj.manufacturer }}</span></el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <div class="span-sty">工时单价</div>
              <el-form-item><span class="addinputInfo">{{ formobj.hourPrice }}</span></el-form-item>
            </el-col>
            <el-col :span="8">
              <div class="span-sty">工时数</div>
              <el-form-item><span class="addinputInfo">{{ formobj.hours }}</span></el-form-item>
            </el-col>
            <el-col :span="8">
              <div class="span-sty">外协成本</div>
              <el-form-item><span class="addinputInfo">{{ formobj.cost }}</span></el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <div class="span-sty">销售价</div>
              <el-form-item><span class="addinputInfo">{{ formobj.price }}</span></el-form-item>
            </el-col>
            <el-col :span="8">
              <div class="span-sty">工时提成</div>
              <el-form-item><span class="addinputInfo">{{ formobj.examineHourPrice }}</span></el-form-item>
            </el-col>
            <el-col :span="8">
              <div class="span-sty">备注</div>
              <el-form-item><span class="addinputInfo">{{ formobj.remarks }}</span></el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <div class="span-sty">预约项目</div>
              <el-form-item><span class="addinputInfo">{{ formobj.isReserve == '1' ? '是' : '否' }}</span></el-form-item>
            </el-col>
            <el-col :span="8">
              <div class="span-sty">洗车项目</div>
              <el-form-item><span class="addinputInfo">{{ formobj.isClean == '1' ? '是' : '否' }}</span></el-form-item>
            </el-col>
            <el-col :span="8">
              <div class="span-sty">排序</div>
              <el-form-item><span class="addinputInfo">{{ formobj.sortNo }}</span></el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import req from '@/api/basicinformation/maintenanceitem'

export default {
  name: 'MaintenanceItemInfo',
  data() {
    return {
      viewTitle: '',
      viewState: 1,
      formobj: {
        sid: '',
        createBySid: '',
        sitemName: '',
        sitemCode: '',
        serviceTypeSid: '',
        serviceType: '',
        goodsModelSid: '',
        goodsModel: '',
        manufacturerSid: '',
        manufacturer: '',
        hourPrice: '',
        hours: '',
        price: '',
        examineHourPrice: '',
        cost: '',
        isReserve: '',
        isClean: '',
        sortNo: '',
        remarks: '',
        useOrgSid: '',
        createOrgSid: '',
        subjectName: '',
        subjectSid: ''
      },
      rules: {}
    }
  },
  methods: {
    showInfo(row) {
      this.viewTitle = '维修项目详情'
      this.$nextTick(() => {
        this.$refs['form_obj'].clearValidate()
      })
      req.fetchBySid(row.sid).then((res) => {
        if (res.success) {
          this.formobj = res.data
        }
      })
    },
    handleReturn() {
      this.formobj = {
        sid: '',
        createBySid: '',
        sitemName: '',
        sitemCode: '',
        serviceTypeSid: '',
        serviceType: '',
        goodsModelSid: '',
        goodsModel: '',
        manufacturerSid: '',
        manufacturer: '',
        hourPrice: '',
        hours: '',
        price: '',
        examineHourPrice: '',
        cost: '',
        isReserve: '',
        isClean: '',
        sortNo: '',
        remarks: '',
        useOrgSid: '',
        createOrgSid: '',
        subjectName: '',
        subjectSid: ''
      }
      this.$emit('doback')
    }
  }
}
</script>

<style scoped>
.span-sty {
  width: 130px !important;
}
.addinputInfo {
  margin-left: 120px !important;
}
.tlineheightb {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
/deep/ .tlineheightb .el-form-item .el-form-item__content .addinputInfo {
  line-height: 15px !important;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
</style>