kd-aiot-frontend/src/views/workforceManagement/classes/components/edit.vue

<!-- 用户编辑弹窗 -->
<template>
  <el-dialog
    class="ele-dialog-form"
    :title="title"
    :visible.sync="visible"
    :before-close="handleClose"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    width="1200px"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-card
        shadow="never"
        header="基本信息"
        body-style="padding: 22px 22px 0 22px;"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item label="编码:" prop="code" style="margin-bottom: 22px">
              <el-input
                clearable
                :maxlength="20"
                v-model="form.code"
                placeholder="请输入"
                :disabled="type == 'edit'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="班次名称:"
              prop="name"
              style="margin-bottom: 22px"
            >
              <el-input
                clearable
                :maxlength="20"
                v-model="form.name"
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="日工作时长:"
              prop="totalWorkHour"
              style="margin-bottom: 22px"
            >
              {{ form.totalWorkHour }} 时
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <el-card
        shadow="never"
        header="工作时间段"
        body-style="padding: 22px 22px 0 22px;"
      >
        <timeTable
          ref="timeTable"
          @timeAll="gettimeAll"
          :delDetailIds="delDetailIds"
        ></timeTable>
      </el-card>
    </el-form>
    <template v-slot:footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" :loading="loading" @click="save">
        保存
      </el-button>
    </template>
  </el-dialog>
</template>

<script>
  import {
    saveteamtime,
    updateteamtime
  } from '@/api/workforceManagement/classes';
  import timeTable from './timeTable.vue';
  export default {
    components: {
      timeTable
    },
    data () {
      const defaultForm = {
        id: '',
        code: '',
        name: '',
        totalWorkHour: '',
        details: []
      };
      return {
        defaultForm,
        // 表单数据
        form: { ...defaultForm },
        // 表单验证规则
        rules: {
          code: [{ required: true, message: '请输入', trigger: 'blur' }],
          name: [{ required: true, message: '请输入', trigger: 'blur' }]
        },
        visible: false,
        type: '', // add/edit
        loading: false,
        options: {
          workshopId: [],
          productionLineId: [],
          workStationId: []
        },
        delDetailIds: []
      };
    },
    computed: {
      title () {
        switch (this.type) {
          case 'add':
            return '新增班次';
            break;
          case 'edit':
            return '修改班次';
            break;
          default:
            break;
        }
      }
    },
    created () {},
    methods: {
      open (type, row) {
        this.type = type;
        this.visible = true;
        if (type == 'edit') {
          for (const key of Object.keys(this.form)) {
            if (row[key]) {
              this.form[key] = row[key];
            }
          }
          this.$nextTick(() => {
            // 反显时间段
            if (row.details) {
              this.$refs.timeTable.form.datasource = row.details;
            }
          });
        }
      },
      /* 保存编辑 */
      save () {
        this.$refs.form.validate((valid) => {
          if (!valid) {
            return false;
          }

          if (this.type == 'add') {
            delete this.form.id;
          }
          this.$refs.timeTable.verification().then((res) => {
            this.loading = true;
            this.form.details = this.$refs.timeTable.form.datasource;
            let fn;
            switch (this.type) {
              case 'add':
                fn = saveteamtime;
                break;
              case 'edit':
                fn = updateteamtime;
                this.form.delDetailIds = this.delDetailIds;
                break;
              default:
                break;
            }
            fn(this.form)
              .then((msg) => {
                this.loading = false;
                this.$message.success(msg);
                this.handleClose();
                this.$emit('done');
              })
              .catch((e) => {
                this.loading = false;
                this.$message.error(e.message);
              });
          });
        });
      },
      // 重置表单
      restForm () {
        this.$refs.form.clearValidate();
        this.form = { ...this.defaultForm };
      },
      handleClose () {
        this.delDetailIds = [];
        this.restForm();
        this.$refs.timeTable.restTable();
        this.visible = false;
      },
      gettimeAll (val) {
        this.form.totalWorkHour = val;
      }
    }
  };
</script>
<style lang="scss" scoped>
  .location-warp {
    display: flex;
    .detail {
      margin-left: 10px;
    }
  }
</style>