kd-aiot-frontend-mes/src/views/produce/components/workStep/index.vue

<template>
  <ele-modal
    title="弹窗示例"
    :maxable="true"
    custom-class="ele-dialog-form long-dialog-form"
    :centered="true"
    :visible.sync="visible"
    :close-on-click-modal="false"
    width="85%"
    append-to-body
    @close="handleClose"
  >
    <ele-pro-table
      style="min-height: 400px"
      ref="fileTable"
      :columns="columns"
      :datasource="workList"
    >
      <template v-slot:starttime="{ row, $index }">
        <el-date-picker
          v-model="row.starttime"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="选择开始日期"
        >
        </el-date-picker>
      </template>
      <template v-slot:endtime="{ row, $index }">
        <el-date-picker
          v-model="row.endtime"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="选择结束日期"
        >
        </el-date-picker>
      </template>
      <template v-slot:wuping="{ row }">
        <el-button type="primary" @click="goDetails(row, 'wuping')"
          >物品({{ dataLeng(row, 'wuping') }})</el-button
        >
      </template>
      <template v-slot:zysx="{ row }">
        <el-button type="primary" @click="goDetails(row, 'zysx')"
          >注意事项({{ dataLeng(row, 'zysx') }})</el-button
        >
      </template>
      <template v-slot:action="{ row }">
        <el-link type="primary" @click="saveData(row)" :underline="false"
          >保存</el-link
        >
      </template>
      <!-- 表头工具栏 -->
    </ele-pro-table>
    <Details
      v-if="detailsVisible"
      :detailsVisible="detailsVisible"
      @close="close"
      :list="list"
    />
  </ele-modal>
</template>

<script>
  import Details from './details.vue';
  import { listByParam } from '@/api/produce/workOrder';
  export default {
    components: { Details },
    data() {
      return {
        visible: false,
        columns: [
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            label: '编码',
            prop: 'code',
            width: 110,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            label: '名称',
            prop: 'name',
            width: 180,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            label: '内容',
            prop: 'defaultValue',
            minWidth: 300,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            slot: 'wuping',
            label: '物品',
            prop: 'wuping',
            width: 130,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            slot: 'zysx',
            label: '注意事项',
            prop: 'zysx',
            width: 130,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            label: '工时',
            prop: 'hs',
            width: 100,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            label: '开始时间',
            slot: 'starttime',
            prop: 'starttime',
            width: 250,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            label: '结束时间',
            slot: 'endtime',
            prop: 'endtime',
            width: 250,
            align: 'center',
            showOverflowTooltip: true
          },

          {
            columnKey: 'action',
            slot: 'action',
            label: '操作',
            align: 'center',
            width: 130,
            resizable: false,
            showOverflowTooltip: true
          }
        ],
        workList: [
          {
            name: '哈哈哈哈哈哈哈',
            timeFlag: false
          },
          {
            name: '哈哈哈哈哈哈哈',
            time: '',
            timeFlag: true
          },
          {
            name: '哈哈哈哈哈哈哈',
            wuping: [
              {
                code: '物品'
              }
            ]
          },
          {
            name: '哈哈哈哈哈哈哈',
            zysx: [
              {
                code: '注意事项'
              }
            ]
          },
          {
            name: '哈哈哈哈哈哈哈'
          },
          {
            name: '哈哈哈哈哈哈哈'
          },
          {
            name: '哈哈哈哈哈哈哈'
          },
          {
            name: '哈哈哈哈哈哈哈'
          }
        ],
        detailsVisible: false,
        list: []
      };
    },
    computed: {
      dataLeng() {
        return (row, type) => {
          if (!row[type]) {
            return 0;
          }
          return row[type].length;
        };
      }
    },
    methods: {
      open(id) {
        console.log(id, 'id ----');
        this.visible = true;
        this.getList(id);
      },
      getList(id) {
        listByParam(id)
          .then((res) => {
            console.log(res, 'res ---');
          })
          .catch((err) => {
            console.log(err, 'err');
          });
      },
      //   保存
      saveData(row) {
        // 注意判断时间 是否填写
        console.log('这里做最后的提交', row);
      },
      handleClose() {
        this.visible = false;
      },
      close() {
        this.detailsVisible = false;
      },
      goDetails(row, type) {
        if (!row[type] || row[type].length == 0) {
          return this.$message.warning('暂无详细数据');
        }
        this.list = row[type];
        this.detailsVisible = true;
      }
    }
  };
</script>