kd-aiot-frontend-eam/src/views/ledgerAssets/components/assetInformationView.vue

<template>
  <div id="assetInformation" class="baseinfo-container">
    <el-form label-width="120px" :model="{ ...zcInfo }" ref="form">
      <div class="content">
        <div class="basic-details-title border-none">
          <span class="border-span">资产信息</span>
        </div>
        <el-descriptions
          title=""
          :column="4"
          size="medium"
          border
          style="edit"
          :label-style="labelStyle"
          class="descriptions"
        >
          <el-descriptions-item>
            <template slot="label"> 固资编码 </template>
            <el-form-item label-width="0">
              <el-input class="input" v-model="zcInfo.fixCode"></el-input>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 编号 </template>
            <el-form-item label-width="0">
              <el-input class="input" v-model="zcInfo.codeNumber"></el-input>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 颜色 </template>
            <el-form-item label-width="0">
              <el-input class="input" v-model="zcInfo.color"></el-input>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 级别 </template>
            <el-form-item label-width="0">
              <el-select
                style="width: 100%"
                v-model="zcInfo.level"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in options.assetLevel"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 有效期开始 </template>
            <el-form-item label-width="0">
              <el-date-picker
                style="width: 100%"
                v-model="zcInfo.startTime"
                type="month"
                value-format="yyyy-MM"
                placeholder="选择有效期开始"
              >
              </el-date-picker>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 有效期结束 </template>
            <el-form-item label-width="0">
              <el-date-picker
                style="width: 100%"
                v-model="zcInfo.endTime"
                @change="endTimeRules"
                value-format="yyyy-MM"
                type="month"
                placeholder="选择有效期结束"
              >
              </el-date-picker>
            </el-form-item>
          </el-descriptions-item>
          <!-- <el-descriptions-item>
            <template slot="label"> 状态 </template>
            <el-form-item label-width="0">
              <el-input
                v-model="zcInfo.status"
                placeholder="请输入状态"
              ></el-input>
            </el-form-item>
          </el-descriptions-item> -->
          <el-descriptions-item>
            <template slot="label"> 入账日期 </template>
            <el-form-item label-width="0">
              <el-date-picker
                style="width: 100%"
                v-model="zcInfo.entryDate"
                type="date"
                placeholder="选择入账日期"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 周期 </template>
            <el-form-item label-width="0">
              <el-select
                style="width: 100%"
                v-model="zcInfo.cycle"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in options.deliveryCycle"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-descriptions-item>
        </el-descriptions>
        <el-descriptions
          title=""
          :column="3"
          size="medium"
          border
          style="edit"
          :label-style="labelStyle"
          class="descriptions"
        >
          <el-descriptions-item>
            <template slot="label"> 权属部门 </template>
            <el-form-item label-width="0">
              <div class="input">
                <!-- <el-input
                  v-model="zcInfo.workstation.groupName"
                  disabled
                  placeholder="请输入内容"
                ></el-input> -->
                <DeptSelect
                  v-model="zcInfo.ownershipGroupId"
                  @input="getqsbm"
                />
              </div>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 权属人 </template>
            <el-form-item label-width="0">
              <!-- <el-input
                v-model="zcInfo.workstation.leaderName"
                disabled
                placeholder="请输入内容"
              ></el-input> -->
              <el-select
                style="width: 100%"
                v-model="zcInfo.ownershipUserId"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in options.ownershipUserId"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item :span="3">
            <template slot="label"> 所属厂房 </template>
            <el-form-item label-width="0">
              <el-input
                style="margin-right: 10px; width: 20%"
                v-model="zcInfo.workstation.workshopPlanName"
                disabled
                placeholder="请输入内容"
              ></el-input>
              <el-input
                style="margin-right: 10px; width: 20%"
                v-model="zcInfo.workstation.workshopName"
                disabled
                placeholder="请输入内容"
              ></el-input>
              <el-input
                style="margin-right: 10px; width: 20%"
                v-model="zcInfo.workstation.productionLineName"
                disabled
                placeholder="请输入内容"
              ></el-input>
              <el-input
                style="margin-right: 10px; width: 20%"
                v-model="zcInfo.workstation.name"
                disabled
                placeholder="请输入内容"
              ></el-input>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 所属工序 </template>
            <el-form-item label-width="0">
              <el-input
                v-model="zcInfo.workstation.taskNames"
                disabled
                placeholder="请输入内容"
              ></el-input>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 设备位置 </template>
            <el-form-item label-width="0" prop="location">
              <div style="display: flex">
                <el-cascader
                  clearable
                  v-model="zcInfo.location"
                  :options="options.cityDataLabel"
                ></el-cascader>
                <el-input
                  style="width: 60%; margin-left: 10px"
                  placeholder="详细地址"
                  v-model="zcInfo.detailPosition"
                ></el-input>
              </div>
            </el-form-item>
          </el-descriptions-item>
        </el-descriptions>
        <el-descriptions
          title=""
          :column="5"
          size="medium"
          border
          style="edit"
          :label-style="labelStyle"
          class="descriptions"
        >
          <el-descriptions-item>
            <template slot="label"> 维护部门 </template>
            <el-form-item label-width="0">
              <div class="input">
                <DeptSelect v-model="zcInfo.repairGroupId" @input="getwhbm" />
              </div>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 维护人 </template>
            <el-form-item label-width="0">
              <el-select
                style="width: 100%"
                v-model="zcInfo.repairUserId"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in options.repairUserId"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-descriptions-item>
        </el-descriptions>
        <el-descriptions
          title=""
          :column="5"
          size="medium"
          border
          style="edit"
          :label-style="labelStyle"
          class="descriptions"
        >
          <el-descriptions-item>
            <template slot="label"> 类型 </template>
            <el-form-item label-width="0">
              <el-select
                style="width: 100%"
                v-model="zcInfo.isPublic"
                filterable
                placeholder="请选择类型"
              >
                <el-option
                  v-for="item in typeOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 使用岗位 </template>
            <el-form-item label-width="0">
              <DeptSelect v-model="zcInfo.postId" @input="auditorDeptClick" />
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 使用人 </template>
            <el-form-item label-width="0">
              <el-select
                style="width: 100%"
                v-model="zcInfo.usePersonId"
                filterable
                placeholder="请选择使用人"
              >
                <el-option
                  v-for="item in userList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label"> 负责人 </template>
            <el-form-item label-width="0">
              <el-select
                style="width: 100%"
                v-model="zcInfo.chargePersonId"
                filterable
                placeholder="请选择负责人"
              >
                <el-option
                  v-for="item in userList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-descriptions-item>
        </el-descriptions>
        <el-descriptions
          title=""
          :column="3"
          size="medium"
          border
          style="edit"
          :label-style="labelStyle"
        >
          <el-descriptions-item>
            <template slot="label"> 供应商 </template>
            <el-form-item label-width="0">
              <el-select
                v-model="zcInfo.supplierId"
                style="width: 100%"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in options.suppList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 品牌 </template>
            <el-form-item label-width="0">
              <el-input v-model="zcInfo.brand" class="input"></el-input>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 设备用途 </template>
            <el-form-item label-width="0">
              <el-input v-model="zcInfo.purpose" class="input"></el-input>
            </el-form-item>
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label"> 备注 </template>
            <el-form-item label-width="0">
              <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
                v-model="zcInfo.remark"
              ></el-input>
            </el-form-item>
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </el-form>
  </div>
</template>

<script>
  import DeptSelect from '@/components/CommomSelect/dept-select.vue';
  import WorkshopSelect from '@/components/CommomSelect/workshop-select.vue';
  import FactoryAreaSelect from '@/components/CommomSelect/factory-area-select.vue';
  import WorkingProcedureSelect from '@/components/CommomSelect/working-procedure-select.vue';
  import factorySelect from '@/components/CommomSelect/factory-select.vue';
  import fileUpload from '@/components/upload/fileUpload';
  import WithView from '@/components/upload/WithView';
  import imgUpload from '@/components/upload/imgUpload';
  import { cityDataLabel } from 'ele-admin/packages/utils/regions';
  import personSelect from '@/components/CommomSelect/person-select.vue';
  import { saveOrEdit, getAssetInfo } from '@/api/ledgerAssets';
  import { getUserPage } from '@/api/system/organization';
  import warehouseDefinition from '@/api/warehouseManagement/warehouseDefinition';
  import { getByCode } from '@/api/system/dictionary-data';
  export default {
    components: {
      WithView,
      WorkshopSelect,
      FactoryAreaSelect,
      WorkingProcedureSelect,
      fileUpload,
      imgUpload,
      factorySelect,
      DeptSelect,
      personSelect
    },
    props: {
      isEdit: {
        type: Boolean,
        default: true
      }
    },
    data() {
      return {
        userList: [], // 人员列表
        labelStyle: {
          'min-width': '100px'
        },
        pageType: 'add',
        id: '', // 设备主键id
        rules: {
          name: [
            { required: true, message: '请输入设备名称', trigger: 'blur' }
          ],
          code: [{ required: true, message: '请输入设备编码', trigger: 'blur' }]
        },
        typeOptions: [
          {
            id: 0,
            name: '专用'
          },
          {
            id: 1,
            name: '公用'
          }
        ],
        // 资产信息
        // zcInfo: {
        //   // 	固定资产编码
        //   fixCode: '',
        //   // 颜色
        //   color: '',
        //   // 重量
        //   weight: '',
        //   // 维护部门
        //   repairGroupId: '',
        //   repairUserId: '',
        //   // 设备用途
        //   purpose: '',
        //   // 设备位置
        //   location: '',
        //   //品牌
        //   brand: '',
        //   // 供应商code
        //   supplierId: '',
        //   // 编号
        //   codeNumber: '',
        //   // 使用人
        //   usePersonId: '',
        //   // 有效期开始
        //   startTime: '',
        //   // 有效结束
        //   endTime: '',
        //   // 级别
        //   level: '',
        //   // 状态
        //   status: '',
        //   // 负责人
        //   chargePersonId: '',
        //   // 入账日期
        //   entryDate: '',
        //   // 周期
        //   cycle: '',
        //   // 备注
        //   remark: '',
        //   // 使用岗位
        //   postId: ''
        // },
        options: {
          ownershipUserId: [], // 权属人
          repairUserId: [], // 维护人
          supplierId: [], // 供应商
          cityDataLabel, // 设备位置
          assetLevel: [], // 资产级别
          deliveryCycle: [], // 送检周期
          suppList: [] // 供应商
        },
        zcInfo: {
          workstation: {}
        }
      };
    },
    props: {
      form: {
        type: Object,
        default: {
          workstation: {}
        }
      }
    },
    watch: {
      form: {
        //监听的对象
        deep: true, //深度监听设置为 true
        handler: function (newValue) {
          console.log(newValue.isPublic);
          this.zcInfo = newValue;
        }
      }
    },
    async mounted() {
      // 获取资产级别下拉框
      await this.getAssetLevelOptions();
      // 获取送检周期下拉
      await this.getDeliveryCycleOptions();
      // 获取供应商下拉列表
      await this.getSuppliersList();
      // 初始化数据
      setTimeout(() => {
        this.initData();
      }, 500);
    },
    methods: {
      // 限制结束时间
      endTimeRules() {
        if (this.zcInfo.startTime) {
          console.log(this.zcInfo.startTime);
          console.log(new Date(this.zcInfo.startTime).getTime());
          let differenceTime =
            new Date(this.zcInfo.endTime).getTime() -
            new Date(this.zcInfo.startTime).getTime();
          if (differenceTime <= 0) {
            this.$message.error('请选择正确的有效结束时间');
            this.zcInfo.endTime = '';
          }
        } else {
          this.$message.error('请选择有效开始时间');
          this.zcInfo.endTime = '';
        }
      },
      // 获取资产级别下拉
      async getAssetLevelOptions() {
        let { data } = await getByCode('asset_level');
        this.options.assetLevel =
          data.length > 0
            ? data.map((item) => {
                return {
                  name: Object.keys(item)[0],
                  id: item[Object.keys(item)[0]]
                };
              })
            : [];
      },
      // 获取送检周期下拉
      async getDeliveryCycleOptions() {
        let { data } = await getByCode('delivery_cycle');
        console.log(data);
        this.options.deliveryCycle =
          data.length > 0
            ? data.map((item) => {
                return {
                  name: item[Object.keys(item)[0]],
                  id: +Object.keys(item)[0]
                };
              })
            : [];
      },
      // 获取维护人下拉列表
      async geMaintainersList() {
        if (!this.zcInfo.repairGroupId) return;
        let data = await getUserPage({
          pageNum: 1,
          size: 9999,
          groupId: this.zcInfo.repairGroupId
        });
        this.options.repairUserId = data.list;
      },
      // 使用岗位点击事件
      async auditorDeptClick(data) {
        this.zcInfo.chargePersonId = '';
        this.zcInfo.usePersonId = '';
        this.userList = [];
        if (data) {
          this.getStaffList(data);
        }
      },
      // 获取供应商下拉列表
      async getSuppliersList() {
        const rep = await warehouseDefinition.eomContact({
          type: 2,
          status: 1,
          size: -1,
          pageNum: 1
        });
        this.options.suppList = rep.list;
      },
      // 通过部门岗位获取人员列表
      async getStaffList(id) {
        let res = await warehouseDefinition.getUserPage({
          groupId: id,
          size: 9999,
          page: 1
        });
        this.userList = res.list;
      },
      // 权属部门
      async getqsbm() {
        if (!this.zcInfo.ownershipGroupId) return;
        let data = await getUserPage({
          pageNum: 1,
          size: 9999,
          groupId: this.zcInfo.ownershipGroupId
        });
        this.options.ownershipUserId = data.list;
      },
      // 维护部门
      async getwhbm() {
        if (!this.zcInfo.repairGroupId) return;
        let data = await getUserPage({
          pageNum: 1,
          size: 9999,
          groupId: this.zcInfo.repairGroupId
        });
        this.options.repairUserId = data.list;
      },
      // 初始化
      async initData() {
        console.log('this.zcInfo---------------------', this.zcInfo);
        // 填充使用岗位
        this.zcInfo.postId && this.auditorDeptClick(this.zcInfo.postId);
        this.geMaintainersList();
      }
    }
  };
</script>

<style lang="scss" scoped>
  ::v-deep .descriptions {
    margin-bottom: 10px;
  }
  .baseinfo-container .basic-details-title {
    font-size: 16px;
    margin: 15px 0;
  }
  .upload-container {
    display: flex;
    justify-content: flex-start;
    .file-list {
      margin-left: 50px;
      flex: 1;
    }
  }
  .equipment-container {
    // .content {
    //   padding: 0 20px;
    // }
    .label-none {
      .el-form-item__content {
        margin-left: 0 !important;
      }
    }
  }
  .sbwz {
    .item {
      width: 120px !important;
    }
    .item + .item {
      margin-left: 10px;
    }
    .item-input {
      width: 350px !important;
    }
  }
  .input {
    width: 100%;
  }
  .kzzd {
    width: 500px;
    .add-col {
      display: flex;
      .col-input {
        & + .col-input {
          margin-left: 10px;
        }
      }
      .del {
        margin-left: 10px;
      }
    }
  }
  ::v-deep .el-descriptions {
    .el-form-item {
      margin-bottom: 0px;
    }
  }
</style>