yudao-dev/src/views/equipment/base/maintain/Monitor/showDetail.vue

<!--
 * @Author: zhp
 * @Date: 2024-07-23 08:35:03
 * @LastEditTime: 2024-07-23 09:21:32
 * @LastEditors: zhp
 * @Description:
-->
<template>
  <div>
    <el-drawer title="配置保养项目" :visible.sync="drawer" :direction="direction" size="50%">
      <div style="padding: 0px 16px;">
        <el-form :model="dataForm">
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="保养计划名称" prop="name">
                <el-input disabled v-model="dataForm.name" placeholder="请输入保养计划名称" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="部门" prop="departmentName">
                <el-input disabled v-model="dataForm.departmentName" placeholder="请输入保养计划名称" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="保养频率" prop="maintenancePeriod">
                <el-input disabled v-model="dataForm.maintenancePeriod" placeholder="请输入保养频率" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="保养时长" prop="maintainDuration">
                <el-input disabled v-model="dataForm.maintainDuration" placeholder="请输入保养时长" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="blue-title">保养内容</div>
        <base-table v-loading="dataListLoading" :table-props="tableProps" :table-data="tableData">
          <!-- <method-btn v-if="tableBtn.length" slot="handleBtn" :width="80" label="操作" :method-list="tableBtn"
            @clickBtn="handleClick" /> -->
        </base-table>
      </div>
    </el-drawer>
  </div>

</template>

<script>
const tableProps = [
  {
    prop: 'equipmentId',
    label: '设备名称',
    align: 'center',
  },
  {
    prop: 'program',
    label: '保养项目',
    align:'center',
  },
  {
    prop: 'maintenanceDes',
    label: '默认保养结果',
    align: 'center',
  },
]
const topBtnConfig = [
  {
    type: 'add',
    btnName: 'btn.add'
  }
]
// import basicPageMixin from '@/mixins/lb/basicPageMixin';
// import AddOrUpdate from './components/add-or-updata';
import {
  getEqMaintainPlanPageData
} from '@/api/equipment/base/maintain/record';
// import basicPage from './components/basic-page';
// import inputArea from './components/InputArea.vue'
export default {
  // mixins: [basicPage],
  // components: {
  //   AddOrUpdate,
  // },
    data() {
      return {
        drawer: false,
        urlOptions: {
          getDataListURL: getEqMaintainPlanPageData,
          // deleteURL: deleteData,
          // exportURL: exportFactoryExcel,
        },
        dataForm: {
          name:undefined,
          departmentName:undefined,
          maintenancePeriod: undefined,
          maintainDuration: undefined,
        },
        direction: 'rtl',
        dataListLoading:false,
        addOrUpdateVisible: false,
        addOrEditTitle: '',
        queryParams: {
          logId:null,
          pageNo:1,
          pageSize:10,
          planId:null,
        },
        tableProps,
        basePath: 'base/equipment-maintain-program',
        tableData: [],
        tableBtn: [
          {
            type: 'edit',
            name: '编辑'
          },
          {
            type: 'delete',
            name: '删除'
          }
        ],
        addButtonShow: '新增'
      }
  },
  methods: {
    getDataList(id) {
      this.dataListLoading = true;
      console.log(id);

      this.queryParams.logId = id
      this.urlOptions.getDataListURL(this.queryParams).then(response => {
        this.tableData = response.data.list;
        // this.listQuery.total = response.data.total;
        this.dataListLoading = false
      });
    },
    handleClick() {

    },
    handleAdd() {
      this.addOrUpdateVisible = true
      this.addOrEditTitle = '新增'
      let obj = {
        equipmentTypeId: this.queryParams.equipmentTypeId
      }
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(obj)
      });
    },
    init(obj) {
      this.drawer = true
      this.dataForm = obj
      console.log(obj.id);

      this.getDataList(obj.id)
      }
    },
  }
</script>

<style lang="scss" scoped>
.blue-title {
  position: relative;
  padding: 4px 0;
  padding-left: 12px;
  font-size: 14px;

  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    height: 16px;
    width: 4px;
    border-radius: 1px;
    background: #0b58ff;
  }
}
</style>