lyh
2025-05-28 e14ed882d12df3b48e59390eba364442cdff70bd
src/views/tms/modules/outBound/OutboundListRight.vue
¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,430 @@
<template>
  <a-card :bordered="false">
    <!-- æŸ¥è¯¢åŒºåŸŸ -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
           <a-col
            :md="6"
            :sm="8"
          >
            <a-form-item
              label="工具编号"
              :labelCol="{span: 5}"
              :wrapperCol="{span: 18, offset: 1}"
            >
              <a-input
                placeholder="请输入工具编号检索"
                v-model="queryParam.toolCode"
              ></a-input>
            </a-form-item>
          </a-col>
          <a-col
            :md="6"
            :sm="8"
          >
            <a-form-item
              label="型号/图号"
              :labelCol="{span: 5}"
              :wrapperCol="{span: 18, offset: 1}"
            >
              <a-input
                placeholder="请输入型号/图号检索"
                v-model="queryParam.toolModel"
              ></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- æŸ¥è¯¢åŒºåŸŸ-END -->
    <!-- æ“ä½œæŒ‰é’®åŒºåŸŸ -->
    <div class="table-operator">
       <Tooltip
        placement="top"
        title="选择工具分类后再执行新增"
      >
          <a-button @click="handleAdd(nodeSelected)" type="primary" icon="plus" :disabled="!nodeSelected.key || nodeSelected.entity.leafFlag === '2'">新增</a-button>
      </Tooltip>
      <a-button type="primary" @click="selectOutboundOrder">申请单出库</a-button>
      <a-button type="primary" icon="download" @click="handleExportXls('tms_tools_classify')">导出</a-button>
      <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
        <a-button type="primary" icon="import">导入</a-button>
      </a-upload>
    </div>
    <!-- table区域-begin -->
    <div>
      <a-table
        ref="table"
        size="middle"
        :scroll="{x:true}"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange,type:'radio'}"
        :customRow="handleRowClick"
        class="j-table-force-nowrap"
        @change="handleTableChange">
<!--        <template slot="htmlSlot" slot-scope="text">-->
<!--          <div v-html="text"></div>-->
<!--        </template>-->
<!--        <template slot="imgSlot" slot-scope="text,record">-->
<!--          <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>-->
<!--          <img v-else :src="getImgView(text)" :preview="record.id" height="25px" alt="" style="max-width:80px;font-size: 12px;font-style: italic;"/>-->
<!--        </template>-->
<!--        <template slot="fileSlot" slot-scope="text">-->
<!--          <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>-->
<!--          <a-button-->
<!--            v-else-->
<!--            :ghost="true"-->
<!--            type="primary"-->
<!--            icon="download"-->
<!--            size="small"-->
<!--            @click="downloadFile(text)">-->
<!--            ä¸‹è½½-->
<!--          </a-button>-->
<!--        </template>-->
        <span slot="action" slot-scope="text, record">
          <a @click="handleDetail(record)">详情</a>
        </span>
      </a-table>
    </div>
     <a-tabs defaultActiveKey="1">
      <a-tab-pane key="1">
        <span slot="tab">
          <a-badge>参数&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a-badge>
        </span>
        <para-hole-tools-list ref="paraHoleToolsList"></para-hole-tools-list>
        <para-threading-tool-list ref="paraThreadingToolList"></para-threading-tool-list>
        <para-mill-tool-list ref="paraMillToolList"></para-mill-tool-list>
        <para-turning-tools-list ref="paraTurningToolsList"></para-turning-tools-list>
        <para-blade-list ref="paraBladeList"></para-blade-list>
        <para-common-tool-list ref="paraCommonToolList"></para-common-tool-list>
      </a-tab-pane>
      <a-tab-pane
        key="2"
        forceRender
      >
        <span slot="tab">
          <a-badge>管理参数&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a-badge>
        </span>
        <tools-config-property-list ref="toolsConfigPropertyList"></tools-config-property-list>
      </a-tab-pane>
    </a-tabs>
    <outbound-modal ref="outboundModal" @ok="selectListOK"></outbound-modal>
    <OutboundOrderSelectList ref="outboundOrderSelectList" @ok="selectListOK"></OutboundOrderSelectList>
    <base-tools-modal ref="modalForm" @ok="modalFormOk" :nodeSelected="nodeSelected"></base-tools-modal>
  </a-card>
</template>
<script>
  import '@/assets/less/TableExpand.less'
  import { mixinDevice } from '@/utils/mixin'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import BaseToolsModal from '../baseTools/BaseToolsModal'
  import Tooltip from 'ant-design-vue/es/tooltip'
  import { getAction, postAction, deleteAction, requestPut } from '@api/manage'
  import OutboundModal from './OutboundModal'
  import OutboundOrderSelectList from './OutboundOrderSelectList'
  import ParaHoleToolsList from '../baseTools/ParaHoleToolsList'
  import ToolsConfigPropertyList from '../baseTools/ToolsConfigPropertyList'
  import ParaMillToolList from '../baseTools/ParaMillToolList'
  import ParaThreadingToolList from '../baseTools/ParaThreadingToolList'
  import ParaTurningToolsList from '../baseTools/ParaTurningToolsList'
  import ParaCommonToolList from '../baseTools/ParaCommonToolList'
  import ParaBladeList from '../baseTools/ParaBladeList'
  export default {
    name: 'OutboundListRight',
    mixins:[JeecgListMixin, mixinDevice],
    components: {
      OutboundModal,
      OutboundOrderSelectList,
      BaseToolsModal,
      Tooltip,
      ParaHoleToolsList,
      ToolsConfigPropertyList,
      ParaMillToolList,
      ParaThreadingToolList,
      ParaTurningToolsList,
      ParaCommonToolList,
      ParaBladeList
    },
    data () {
      return {
        description: '工具出库页面',
        /* åˆ†é¡µå‚æ•° */
        ipagination:{
          current: 1,
          pageSize: 5,
          pageSizeOptions: ['5', '10', '20', '30'],
          showTotal: (total, range) => {
            return range[0] + "-" + range[1] + " å…±" + total + "条"
          },
          showQuickJumper: true,
          showSizeChanger: true,
          total: 0
        },
        // è¡¨å¤´
        columns: [
          {
            title: '#',
            dataIndex: '',
            key:'rowIndex',
            width:60,
            align:"center",
            customRender:function (t,r,index) {
              return parseInt(index)+1;
            }
          },
          {
            title:'工具编码',
            align:"center",
            dataIndex: 'toolCode'
          },
          {
            title:'工具编号',
            align:"center",
            dataIndex: 'toolId'
          },
          {
            title:'工具类型',
            align:"center",
            dataIndex: 'signCode'
          },
          {
            title:'中文名称',
            align:"center",
            dataIndex: 'chineseName'
          },
          {
            title:'型号/图号',
            align:"center",
            dataIndex: 'toolModel'
          },
          {
            title:'刀具材料',
            align:"center",
            dataIndex: 'toolMaterial'
          },
          {
            title:'零件材料',
            align:"center",
            dataIndex: 'partMaterial'
          },
          {
            title:'出库类型',
            align:"center",
            dataIndex: 'outStorehouseType_dictText'
          },
          {
            title:'库位号',
            align:"center",
            dataIndex: 'goodsShelvesCode'
          },
          {
            title:'出库数量',
            align:"center",
            dataIndex: 'outNumber'
          },
          {
            title:'创建人',
            align:"center",
            dataIndex: 'createBy'
          },
          {
            title:'创建时间',
            align:"center",
            dataIndex: 'createTime'
          },
          // {
          //   title: '操作',
          //   dataIndex: 'action',
          //   align:"center",
          //   fixed:"right",
          //   width:147,
          //   scopedSlots: { customRender: 'action' }
          // }
        ],
        url: {
          list: "/tms/outStoreDetail/list",
          paraHolesToolsList:"/tms/baseTools/paraHolesToolsList",
          paraCommonToolList:"/tms/baseTools/paraCommonToolList",
          paraThreadingToolList:"/tms/baseTools/paraThreadingToolList",
          paraMillToolList:"/tms/baseTools/paraMillToolList",
          paraTurningToolsList:"/tms/baseTools/paraTurningToolsList",
          paraBladeList:"/tms/baseTools/paraBladeList",
          delete: "/tms/baseTools/delete",
          deleteBatch: "/tms/baseTools/deleteBatch",
          edit: '/tms/baseTools/edit',
          exportXlsUrl: "/tms/baseTools/exportXls",
          importExcelUrl: "tms/baseTools/importExcel",
          queryParaByToolCode:"/tms/baseTools/queryByToolCode",
          queryByToolCode:"/tms/toolsConfigProperty/queryByToolCode"
        },
        dictOptions:{},
        superFieldList:[],
        nodeSelected: {}, // å½“前选中的节点数据
        paraTypeFlag:''
      }
    },
    created() {
      this.$bus.$on('getCurrSelected', (data) => {
        console.log(data)
      //getCurrSelected äº‹ä»¶ æŽ¥æ”¶ç»„件传递的参数
      this.nodeType = (data.type == undefined ? 0 : data.type);
      this.paraTypeFlag = (data.entity == undefined ? 0 : data.entity.paraTypeFlag)
      this.nodeSelected = data;
      this.queryParam.classifyId = data.key
      this.loadData()
      this.clearPara()
    })
    },
    computed: {
      importExcelUrl: function(){
        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
      },
    },
    methods: {
      selectOutboundOrder() {
        this.$refs.outboundOrderSelectList.openSelect();
      },
      handleRowClick(record) {
        return {
          on: {
            click: () => {
              console.log(record)
              this.onSelectChange(record.id.split(","), [record]);
            }
          }
        }
      },
      handleAdd(entity) {
        if (!this.nodeSelected ) {
          this.$message.warning('请先选择一个工具分类');
          return;
        }
        // æ‰“开新增模态框,并传递当前选中的节点
        this.$refs.outboundModal.add(this.nodeSelected);
        this.$refs.outboundModal.title = "新增工具出库";
        this.$refs.outboundModal.disableSubmit = false;
      },
      handleDelete(id) {
        deleteAction(this.url.delete, {id: id}).then((res) => {
                if (res.success) {
                  //重新计算分页问题
                  this.loadData()
                  this.$message.success(res.message);
                  this.$bus.$emit('queryTreeData')
                  this.clearPara()
                } else {
                  this.$message.warning(res.message);
                }
              });
      },
      selectListOK() {
        this.loadData()
      },
      modalFormOk() {
        this.loadData(); // åˆ·æ–°è¡¨æ ¼æ•°æ®
        this.$bus.$emit('queryTreeData') //刷新左侧树
      },
      onSelectChange(selectedRowKeys, selectionRows) {
        this.selectedRowKeys = selectedRowKeys;
        this.selectionRows = selectionRows;
        const toolCode = this.selectionRows[0].toolCode
        //通过id查询管理参数和参数数据
        getAction(this.url.queryParaByToolCode, { toolCode: toolCode,paraTypeFlag:this.paraTypeFlag}).then((res) => {
          if (res.success) {
            if(this.paraTypeFlag === "1"){
              this.$refs.paraCommonToolList.getPara(res.result);
            }else if(this.paraTypeFlag === "2"){
              this.$refs.paraHoleToolsList.getPara(res.result);
            }else if(this.paraTypeFlag === "3"){
              this.$refs.paraThreadingToolList.getPara(res.result);
            }else if(this.paraTypeFlag === "4"){
              this.$refs.paraMillToolList.getPara(res.result);
            }else if(this.paraTypeFlag === "5"){
              this.$refs.paraTurningToolsList.getPara(res.result);
            }else if(this.paraTypeFlag === "6"){
              this.$refs.paraBladeList.getPara(res.result);
            }
          } else {
            this.$message.warning(res.message);
          }
        })
        getAction(this.url.queryByToolCode, { toolCode: toolCode}).then((res) => {
          if (res.success) {
            this.$refs.toolsConfigPropertyList.getPara(res.result);
          } else {
            this.$message.warning(res.message);
          }
        })
      },
      // å¤„理编辑按钮点击事件
      handleEditSelected() {
        if (this.selectedRowKeys.length === 0) {
          this.$message.warning('请选择一条记录进行编辑');
          return;
        }
        const selectedRecord = this.dataSource.find(item => item.id === this.selectedRowKeys[0]);
        if (selectedRecord) {
          this.handleEdit(selectedRecord);
        }
      },
      onClearSelected() {
        this.selectedKeys = [];
        this.nodeSelected = {}; // æ¸…空选中的节点
        this.dataSource = []; // æ¸…空表格数据
      },
      //重置
      searchReset() {
        this.queryParam = {}
        this.loadData(1);
        this.clearPara()
      },
      //清空选中及参数
      clearPara(){
        this.selectedRowKeys = []
        this.$refs.paraCommonToolList.visable = false
        this.$refs.paraHoleToolsList.visable = false
        this.$refs.paraThreadingToolList.visable = false
        this.$refs.paraMillToolList.visable = false
        this.$refs.paraTurningToolsList.visable = false
        this.$refs.paraBladeList.visable = false
        this.$refs.toolsConfigPropertyList.visable = false
      }
    },
  }
</script>
<style scoped>
  @import '~@assets/less/common.less';
   .enable {
    color: green;
  }
  .disable {
    color: red;
  }
</style>