art: 设备管理-保养标准-编辑功能

zhangherong

2025-03-31 67000bf11ea45f2f29177e203e91d42f524faa59

art: 设备管理-保养标准-编辑功能

 src/views/eam/base/EamMaintenanceStandardList.vue

@@ -83,7 +83,9 @@
        class="j-table-force-nowrap"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        @change="handleTableChange">

        <template slot="referenceFile" slot-scope="text, record, index">
          <a v-if="text && text !== ''" @click="handlePreview(record)">预览</a>
        </template>
        <span slot="action" slot-scope="text, record">
          <a @click="handleEdit(record)">编辑</a>

@@ -106,6 +108,7 @@

    <!-- 表单区域 -->
    <eamMaintenanceStandard-modal ref="modalForm" @ok="modalFormOk"></eamMaintenanceStandard-modal>
    <lx-file-preview ref="lxFilePreview" :fileUrl="fileUrl"></lx-file-preview>
  </a-card>
</template>

@@ -113,6 +116,7 @@
import '@/assets/less/TableExpand.less'
import EamMaintenanceStandardModal from './modules/EamMaintenanceStandardModal'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'


export default {
  name: 'EamMaintenanceStandardList',
@@ -146,29 +150,45 @@
          dataIndex: 'standardName'
        },
        {
          title: '保养周期',
          title: '文件编号',
          align: 'center',
          dataIndex: 'fileCode'
        },
        {
          title: '保养周期(天)',
          align: 'center',
          dataIndex: 'maintenancePeriod'
        },
        {
          title: '初始日期',
          align: 'center',
          dataIndex: 'initialDate'
        },
        {
          title: '保养分类',
          align: 'center',
          dataIndex: 'maintenanceCategory'
          dataIndex: 'maintenanceCategory_dictText'
        },
        {
          title: '设备编号',
          align: 'center',
          dataIndex: 'equipmentCode'
          dataIndex: 'equipmentId_dictText'
        },
        {
          title: '标准状态',
          align: 'center',
          dataIndex: 'standardStatus'
          dataIndex: 'standardStatus_dictText'
        },
        {
          title: '标准版本',
          title: '版本',
          align: 'center',
          dataIndex: 'standardVersion'
        },
        {
          title: '参考文件',
          align: 'center',
          dataIndex: 'referenceFile',
          scopedSlots: { customRender: 'referenceFile' }
        },
        {
          title: '操作',
@@ -183,7 +203,8 @@
        deleteBatch: '/eam/maintenanceStandard/deleteBatch',
        exportXlsUrl: 'eam/maintenanceStandard/exportXls',
        importExcelUrl: 'eam/maintenanceStandard/importExcel'
      }
      },
      fileUrl: '',
    }
  },
  computed: {
@@ -191,7 +212,21 @@
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    }
  },
  methods: {}
  methods: {
    handlePreview: function (record) {
      if(record.referenceFile) {
        try {
          let file = JSON.parse(record.referenceFile);
          this.$refs.lxFilePreview.preview(file.filePath);
        }catch (e) {
          console.error(e);
          this.$message.error(e.message);
        }
      }else {
        this.$message.warning("参考文件为空！");
      }
    },
  }
}
</script>
<style scoped>

 src/views/eam/base/modules/EamMaintenanceStandardModal.vue

@@ -24,7 +24,7 @@
          </a-col>
          <a-col :span="8">
            <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="maintenanceCategory" label="保养分类">
              <j-dict-select-tag dict-code="maintenance_category" placeholder="请选择保养分类" v-model="model.maintenanceCategory" />
              <j-dict-select-tag dict-code="maintenance_category" placeholder="请选择保养分类" v-model="model.maintenanceCategory" :disabled="editable" />
            </a-form-model-item>
          </a-col>
        </a-row>
@@ -36,7 +36,7 @@
          </a-col>
          <a-col :span="8">
            <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="initialDate" label="初始日期">
              <a-date-picker placeholder="请选择初始日期" v-model="model.initialDate" format="yyyy-MM-dd" style="width: 100%"/>
              <a-date-picker placeholder="请选择初始日期" v-model="model.initialDate" format="YYYY-MM-DD" style="width: 100%" :disabled="editable"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
@@ -48,7 +48,7 @@
        <a-row :gutter="24">
          <a-col :span="8">
            <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="equipmentId" label="设备编号">
              <lx-search-equipment-select placeholder="请输入设备编号或名称搜索" v-model="model.equipmentId"></lx-search-equipment-select>
              <lx-search-equipment-select placeholder="请输入设备编号或名称搜索" v-model="model.equipmentId" :disabled="editable"></lx-search-equipment-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
@@ -70,7 +70,7 @@
              :wrapperCol="wrapperCol"
              prop="fileList">
              <lx-upload :returnUrl="false"
                         :isMultiple="false"
                         :multiple="false"
                         v-model="model.fileList"
                         biz="EamMaintenanceStandard">
              </lx-upload>
@@ -99,7 +99,7 @@
</template>

<script>
  import { httpAction } from '@/api/manage'
import { getAction, httpAction } from '@/api/manage'
  import { JVxeTableModelMixin } from '@/mixins/JVxeTableModelMixin.js'
  import { JVXETypes } from '@/components/jeecg/JVxeTable'
  import LxSearchEquipmentSelect from '@views/eam/equipment/modules/LxSearchEquipmentSelect'
@@ -115,6 +115,7 @@
        title:"操作",
        visible: false,
        model: {},
        editable: false,
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
@@ -123,7 +124,6 @@
          xs: { span: 24 },
          sm: { span: 16 },
        },

        confirmLoading: false,
        validatorRules: {
          standardName: [
@@ -145,6 +145,7 @@
        url: {
          add: "/eam/maintenanceStandard/add",
          edit: "/eam/maintenanceStandard/edit",
          detail: "/eam/eamMaintenanceStandardDetail/queryList",
        },
        detail: {
          loading: false,
@@ -177,7 +178,7 @@
              width: '20%',
              align:"center",
              validateRules: [
                {required : true}
                {required : true, message: '保养项不能为空！'}
              ]
            },
            {
@@ -194,7 +195,7 @@
              width: '30%',
              align:"center",
              validateRules: [
                {required : true}
                {required : true, message: "保养要求不能为空！"}
              ]
            },
          ],
@@ -211,12 +212,21 @@
    },
    methods: {
      add () {
        //初始化默认值
        this.edit({});
        this.model = {};
        this.visible = true;
        this.editable = false;
      },
      edit (record) {
        this.model = Object.assign({}, record);
        this.visible = true;
        this.editable = true;
        if(record && record.referenceFile) {
          let obj = JSON.parse(record.referenceFile);
          this.model.fileList = [obj];
        }else {
          this.model.fieldList = [];
        }
        this.loadDetail(record.id);
      },
      close () {
        this.$emit('close');
@@ -233,10 +243,10 @@
        // 触发表单验证
         this.$refs.form.validate(valid => {
          if (valid) {
            debugger;
            let tableData = that.$refs.editableDetailTable.getTableData();
            let newData = that.$refs.editableDetailTable.getNewData();
            let removeData = that.$refs.editableDetailTable.getDeleteData();
            that.model.tableDetailList = [...tableData];
            that.model.removeDetailList = [...removeData];

            that.confirmLoading = true;
            let httpurl = '';
@@ -267,7 +277,17 @@
      handleCancel () {
        this.close()
      },

      //加载详情数据
      loadDetail(standardId) {
        this.detail.dataSource = [];
        if (standardId) {
          getAction(this.url.detail, { standardId: standardId }).then(res => {
            if (res.success) {
              this.detail.dataSource = [...res.result];
            }
          })
        }
      }

    }
  }

 src/views/eam/equipment/modules/LxSearchEquipmentSelect.vue

@@ -13,148 +13,110 @@
    @change="handleAsyncChange"
    allowClear
    :notFoundContent="loading ? undefined : null"
    :mode="mode"
    mode="default"
  >
    <template #suffixIcon>
      <a-icon type="search" />
    </template>
    <a-spin v-if="loading" slot="notFoundContent" size="small"/>
    <a-spin v-if="loading" slot="notFoundContent" size="small" />
    <a-select-option v-for="d in options" :key="d.value" :value="d.value">{{ d.text }}</a-select-option>
  </a-select>

</template>

<script>
import { ajaxGetDictItems,getDictItemsFromCache } from '@/api/api'
import debounce from 'lodash/debounce';
import debounce from 'lodash/debounce'
import { getAction } from '@/api/manage'

export default {
  name: 'LxSearchEquipmentSelect',
  props:{
  props: {
    disabled: Boolean,
    value: [String, Number],
    dictOptions: Array,
    placeholder:{
      type:String,
      default:"请选择",
      required:false
    placeholder: {
      type: String,
      default: '请选择',
      required: false
    },
    pageSize:{
    pageSize: {
      type: Number,
      default: 20,
      required: false
    },
    mode:{
      type: String,
      default: '',
    },
  },
  data(){
    this.loadData = debounce(this.loadData, 800);//消抖
    this.lastLoad = 0;
  data() {
    this.loadData = debounce(this.loadData, 800)//消抖
    this.lastLoad = 0
    return {
      loading:false,
      selectedValue:[],
      selectedAsyncValue:[],
      options: [],
      loading: false,
      selectedValue: undefined,
      selectedAsyncValue: undefined,
      options: []
    }
  },
  created(){
    this.initDictData();
  created() {
    // this.initDictData()
  },
  watch:{
    "value":{
      immediate:true,
      handler(val){
        if(!val){
          if(val==0){
            this.initSelectValue()
          }else{
            this.selectedValue=[]
            this.selectedAsyncValue=[]
          }
        }else{
  watch: {
    'value': {
      immediate: true,
      handler(val) {
        if (!val) {
          this.initDictData();
        } else {
          this.initSelectValue()
        }
      }
    },
    }
  },
  methods:{
    initSelectValue(){
  methods: {
    initSelectValue() {
      if(!this.selectedAsyncValue || !this.selectedAsyncValue.key || this.selectedAsyncValue.key!=this.value){
        console.log("这才请求后台")
        //update-begin-author:taoyan date:20220112 for: 方法initSelectValue 根据下拉框实际值查询下拉框的显示的文本 因后台接口只处理3个参数，所以将过滤条件去掉
        // TODO 隐患 查询效率问题 还是应该在后台作筛选
        let itemDictStr = this.dict
        let arr = itemDictStr.split(',')
        if(arr && arr.length==4){
          // 删除最后一个元素
          arr.pop();
          itemDictStr = arr.join(',')
        }
        //update-end-author:taoyan date:20220112 for: 方法initSelectValue 根据下拉框实际值查询下拉框的显示的文本 因后台接口只处理3个参数，所以将过滤条件去掉
        getAction(`/eam/equipment/asyncLoadEquipment`,{key:this.value}).then(res=>{
        getAction(`/eam/equipment/asyncLoadEquipment`, { id: this.value }).then(res=>{
          if(res.success){
            //update-begin---author:wangshuai ---date:20221115  for：[issues/4213]JSearchSelectTag改造支持多选------------
            //判断是否多选
            if(this.mode === 'multiple'){
              if(res.result && res.result.length>0){
                let itemArray = [];
                let valueArray = this.value.split(",")
                for (let i = 0; i < res.result.length; i++) {
                  itemArray.push({
                    key:valueArray[i],
                    label:res.result[i]
                  })
                }
                this.selectedAsyncValue = itemArray
              }else{
                this.selectedAsyncValue = []
                this.selectedValue = []
              }
            }else{
            if(res.result && res.result.length > 0){
              let obj = {
                key:this.value,
                label:res.result
                key : this.value,
                label: res.result[0].text
              }
              this.selectedAsyncValue = {...obj}
              this.selectedAsyncValue = {...obj};
            }
            //update-end---author:wangshuai ---date:20221115  for：[issues/4213]JSearchSelectTag改造支持多选--------------
            this.options = res.result;
          }
        })
      }
    },
    loadData(value){
      console.log("数据加载",value)
      this.lastLoad +=1
    loadData(value) {
      console.log('数据加载', value)
      this.lastLoad += 1
      const currentLoad = this.lastLoad
      this.options = []
      this.loading=true
      this.loading = true
      // 字典code格式：table,text,code
      getAction(`/eam/equipment/asyncLoadEquipment`,{keyword:value, pageSize: this.pageSize}).then(res=>{
        this.loading=false
        if(res.success){
          if(currentLoad!=this.lastLoad){
      getAction(`/eam/equipment/asyncLoadEquipment`, { keyword: value, pageSize: this.pageSize }).then(res => {
        this.loading = false
        if (res.success) {
          if (currentLoad != this.lastLoad) {
            return
          }
          this.options = res.result
          console.log("我是第一个",res)
        }else{
          console.log('我是第一个', res)
        } else {
          this.$message.warning(res.message)
        }

      })

    },
    initDictData(){
    initDictData() {
      //异步一开始也加载一点数据
      this.loading=true
      getAction(`/eam/equipment/asyncLoadEquipment`,{pageSize: this.pageSize, keyword:''}).then(res=>{
        this.loading=false
        if(res.success){
          this.options = res.result
        }else{
      this.loading = true
      getAction(`/eam/equipment/asyncLoadEquipment`, { pageSize: this.pageSize, keyword: '' }).then(res => {
        this.loading = false
        if (res.success) {
          this.options = [...res.result]
        } else {
          this.$message.warning(res.message)
        }
      })
@@ -162,53 +124,34 @@
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    handleChange (selectedValue) {
      console.log("selectedValue",selectedValue)
      this.selectedValue = selectedValue
      this.callback()
    },
    handleAsyncChange(selectedObj){
    handleAsyncChange(selectedObj) {
      //update-begin-author:scott date:20201222 for:【搜索】搜索查询组件，删除条件，默认下拉还是上次的缓存数据，不好 JT-191
      if(selectedObj){
      if (selectedObj) {
        this.selectedAsyncValue = selectedObj
        //update-begin---author:wangshuai ---date:20221115  for：[issues/4213]JSearchSelectTag改造支持多选------------
        if(this.mode ==='multiple'){
          let keyArray = []
          for (let i = 0; i < selectedObj.length; i++) {
            keyArray.push(selectedObj[i].key)
          }
          this.selectedValue = keyArray
        }else{
          this.selectedValue = selectedObj.key
        }
        this.selectedValue = selectedObj.key
        //update-end---author:wangshuai ---date:20221115  for：[issues/4213]JSearchSelectTag改造支持多选------------
      }else{
      } else {
        this.selectedAsyncValue = null
        this.selectedValue = null
        this.options = null
        this.loadData("")
        this.loadData('')
      }
      this.callback()
      //update-end-author:scott date:20201222 for:【搜索】搜索查询组件，删除条件，默认下拉还是上次的缓存数据，不好 JT-191
    },
    callback(){
      //update-begin---author:wangshuai ---date:20221115  for：[issues/4213]JSearchSelectTag改造支持多选------------
      if(this.mode === 'multiple'){
        this.$emit('change',  this.selectedValue.join(","));
      }else{
        this.$emit('change', this.selectedValue);
      }
      //update-end---author:wangshuai ---date:20221115  for：[issues/4213]JSearchSelectTag改造支持多选------------
    callback() {
      this.$emit('change', this.selectedValue)
    },
    getParentContainer(node){
      if(typeof this.getPopupContainer === 'function'){
    getParentContainer(node) {
      if (typeof this.getPopupContainer === 'function') {
        return this.getPopupContainer(node)
      } else if(!this.popContainer){
      } else if (!this.popContainer) {
        return node.parentNode
      }else{
      } else {
        return document.querySelector(this.popContainer)
      }
    },
    }

  },
  model: {