kd-aiot-frontend-wt/src/views/bpm/handleTask/components/equipmentDisposal/edit.vue

<template>
  <div>
    <headerTitle title="基本信息" style="margin-top: 15px"></headerTitle>

    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="100px"
      class="create-form"
    >
      <el-row :gutter="15">
        <el-col v-bind="styleResponsive ? { lg: 8, md: 12 } : { span: 8 }">
          <el-form-item label="处置方式:" prop="disposalType">
            <DictSelection
              dictName="设备处置方式"
              v-model="form.disposalType"
              :disabled="type == 'detail'"
              @change='disposalTypeChange'
            ></DictSelection>
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { lg: 8, md: 12 } : { span: 8 }">
          <el-form-item label="编码:" prop="code">
            <el-input v-model="form.code" disabled />
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { lg: 8, md: 12 } : { span: 8 }">
          <el-form-item label="名称:" prop="name">
            <el-input v-model="form.name" :disabled="type == 'detail'" />
          </el-form-item>
        </el-col>
     
        <el-col v-bind="styleResponsive ? { lg: 8, md: 12 } : { span: 8 }">
          <el-form-item label="管理类别:" prop="managementCategory">
            <DictSelection
              dictName="管理类别"
              v-model="form.managementCategory"
              :disabled="type == 'detail'"
            ></DictSelection>
          </el-form-item>
        </el-col> </el-row
    ></el-form>
    <headerTitle title="处置对象" style="margin-top: 15px"></headerTitle>
    <ele-pro-table
      ref="table"
      :columns="columns"
      :datasource="deviceList"
      row-key="id"
      height="30vh"
      :needPage="false"
    >
      <template v-slot:toolbar>
        <div class="add-product" @click="addEquipment" v-if="type != 'detail'">
          <i class="el-icon-circle-plus-outline"></i>
        </div>
      </template>
      <template v-slot:modelType="{ row }">
        <span>{{ row.category.modelType }}</span>
      </template>
      <template v-slot:specification="{ row }">
        <span>{{ row.category.specification }}</span>
      </template>
      <template v-slot:originalValue="{ row }">
        <el-input v-model="row.originalValue" :disabled="type == 'detail'" />
      </template>
      <template v-slot:netWorth="{ row }">
        <el-input v-model="row.netWorth" :disabled="type == 'detail'" />
      </template>
      <template v-slot:scrapValue="{ row }">
        <el-input v-model="row.scrapValue" :disabled="type == 'detail'" />
      </template>
      <template v-slot:action="{ row }">
        <el-popconfirm
          v-if="type != 'detail'"
          class="ele-action"
          title="确定要删除吗？"
          @confirm="del(row.id)"
        >
          <template v-slot:reference>
            <el-link type="danger" :underline="false" icon="el-icon-delete">
              删除
            </el-link>
          </template>
        </el-popconfirm>
      </template>
    </ele-pro-table>
    <headerTitle title="处置业务" style="margin-top: 15px">
   
    </headerTitle>
    <el-form label-width="150px" class="create-form">
      <el-button
        size="small"
        type="primary"
        class="ele-btn-icon"
        style="margin-left: 15px; margin-bottom: 15px"
        @click="infoDisposalVisible = true"
        v-if="type != 'detail'"
      >
        新增处置业务
      </el-button>
      <el-row :gutter="15">
        <el-col
          v-bind="styleResponsive ? { lg: 24, md: 24 } : { span: 24 }"
          v-for="item in disposalTypeList"
          :key="item.id"
        >
          <el-form-item :label="item.name + ':'">
            <div style="width: 95%; display: inline-block">
              <formContent
                :type="item.type"
                v-model="item.value"
                :disabled="type == 'detail'"
              />
            </div>

            <el-link
              type="danger"
              :underline="false"
              v-if="type != 'detail'"
              icon="el-icon-delete"
              style="display: inline-block"
              @click.native="delInfoDisposal(item.id)"
            >
            </el-link>
          </el-form-item>
        </el-col> </el-row
    ></el-form>

    <!-- 选择产品 -->

    <MaterialAdd ref="materialAddRef" @chooseEquipment="confirmChoose">
    </MaterialAdd>
    <ele-modal :visible.sync="infoDisposalVisible" width="50vw" append-to-body>
      <infoDisposalList
        :isModal="true"
        :disabledList="form.detailList"
        ref="infoDisposal"
      ></infoDisposalList>
      <template v-slot:footer>
        <el-button @click="infoDisposalVisible = false">取消</el-button>

        <el-button type="primary" @click="getInfoDisposalList">
          确认
        </el-button>
      </template>
    </ele-modal>
  </div>
</template>

<script>
// import AssetsDialog from './AssetsDialog.vue';
import MaterialAdd from './MaterialAdd.vue';
import formContent from './formContent.vue';

import infoDisposalList from './infoDisposalList.vue';
import { getById } from '@/api/bpm/components/equipmentDisposal';

import deptSelect from '@/components/CommomSelect/dept-select.vue';

const defForm = {
  name: '',
  id: '', //
  disposalType: '',
  managementCategory: '',
  processId: '',
  code: '',
  disposalTypeList: [],
  deviceList: []
};
export default {
  components: {
    // AssetsDialog,
    MaterialAdd,
    infoDisposalList,
    deptSelect,
    formContent
    // workList
  },
  props: {
    businessId: {
      default: ''
    },

    taskDefinitionKey: {
      default: ''
    }
  },
  data() {
    return {
      visible: false,
      loading: false,
      infoDisposalVisible: false,
      title: '物品处置',
      type: 'detail',
      form: { ...defForm },
      rules: {
        name: [{ required: true, message: '请选择', trigger: 'change' }],
        type: [{ required: true, message: '请选择', trigger: 'change' }],
        disposalType: [{ required: true, message: '请选择', trigger: 'change' }],

      },
      deviceList: [],
      disposalTypeList: [],
      columns: []
    };
  },

  computed: {
    // 是否开启响应式布局
    styleResponsive() {
      return this.$store.state.theme.styleResponsive;
    }
  },
  created() {
    this.open();
   
    this.type = this.taskDefinitionKey == 'fqr' ? 'edit' : 'detail';
  },
  methods: {
    async columnsInit(val) {
      this.columns = [
        {
          columnKey: 'index',
          label: '序号',
          type: 'index',
          width: 55,
          align: 'center',
          showOverflowTooltip: true,
          fixed: 'left'
        },
        {
          prop: 'fixCode',
          label: '固资编码',
          showOverflowTooltip: true,
          align: 'center'
        },
        {
          prop: 'codeNumber',
          label: '编码',
          showOverflowTooltip: true,
          align: 'center'
        },
        {
          prop: 'name',
          showOverflowTooltip: true,
          label: '名称',
          align: 'center'
        },

        {
          prop: 'modelType',
          showOverflowTooltip: true,
          slot: 'modelType',
          label: '型号',
          align: 'center'
        },
        {
          prop: 'specification',
          showOverflowTooltip: true,
          slot: 'specification',
          label: '规格',
          align: 'center'
        },
        {
          prop: 'sealingTime',
          showOverflowTooltip: true,
          label: '封存时间',
          show: val == 6,
          align: 'center'
        },
        {
          showOverflowTooltip: true,
          prop: 'postName',
          label: '使用部门',
          align: 'center'
        },
        {
          prop: 'usePerson',
          showOverflowTooltip: true,
          label: '使用人',
          align: 'center'
        },
        {
          prop: 'serviceLife',
          label: '耐用年限',
          showOverflowTooltip: true,
          align: 'center'
        },
        {
          prop: 'alreadyServiceLife',
          label: '已使用年限',
          showOverflowTooltip: true,
          align: 'center'
        },
        {
          prop: 'originalValue',
          label: '原值',
          slot: 'originalValue',
          showOverflowTooltip: true,
          align: 'center'
        },
        {
          prop: 'netWorth',
          slot: 'netWorth',
          label: '净值',
          showOverflowTooltip: true,
          align: 'center'
        },
        {
          slot: 'scrapValue',
          prop: 'scrapValue',
          label: '残值',
          showOverflowTooltip: true,
          align: 'center'
        },
        {
          prop: 'manufacturer',
          label: '生产厂家',
          showOverflowTooltip: true,
          align: 'center'
        },
        ,
        {
          prop: 'pathName',
          label: '位置',
          showOverflowTooltip: true,
          minWidth: 110,
          formatter: (_row) => {
            const positionDetail =
              _row.position &&
              _row.position.length != 0 &&
              _row.position[0].detailPosition
                ? _row.position[0].detailPosition
                : '-';
            return _row.deviceLocationName
              ? _row.deviceLocationName + '-' + positionDetail
              : '';
          }
        },
        {
          columnKey: 'action',
          label: '操作',
          width: 140,
          align: 'center',
          resizable: false,
          fixed: 'right',
          slot: 'action',
          showOverflowTooltip: true
        }
      ];
    },
    async open() {
      const data = await getById(this.businessId);
      this.form = data;
      this.columnsInit(this.form.disposalType);
      this.form.disposalType = this.form.disposalType + '';
      this.form.managementCategory = this.form.managementCategory + '';
      this.deviceList = this.form.deviceList;
      this.disposalTypeList = this.form.disposalTypeList;
    },
    disposalTypeChange(val) {
      this.columnsInit(val);
    },
    del(id) {
      this.deviceList = this.deviceList.filter((item) => item.id != id);
    },
    addEquipment() {
      this.$refs.materialAddRef.open(null, null, true, this.deviceList);
    },
    // 确定选择
    confirmChoose(data) {
      this.deviceList.push(...data);
    },
    getInfoDisposalList() {
      this.disposalTypeList.push(...this.$refs.infoDisposal.getValue());
      this.infoDisposalVisible = false;
    },
    delInfoDisposal(id) {
      this.disposalTypeList = this.disposalTypeList.filter(
        (item) => item.id != id
      );
    },

    /* 保存编辑 */
    getTableValue() {
      if (this.deviceList.length == 0) {
        this.$message.error('请选择处置对象！');
        return;
      }

      this.form.deviceList = this.deviceList;
      this.form.disposalTypeList = this.disposalTypeList;
      return this.form;
    }
  }
};
</script>
<style lang="scss" scoped>
.basic-details-title {
  margin: 10px 0;
}
.title {
  font-size: 16px;
  line-height: 45px;
}
.add-product {
  width: 100%;
  display: flex;
  align-items: center;
  // justify-content: flex-end;
  font-size: 30px;
  color: #1890ff;
  margin: 10px 0;
  cursor: pointer;
}
</style>