1.处理页面表格错位问题 引入activated() 事件

小小儁爺

2024-09-05 86e5ff7028168bf18b5d3846022ebeac09aa4d4f

 src/views/basicSettings/contactUnitList.vue

@@ -7,10 +7,8 @@

          <div style="margin: 20px 10px 0 10px;display: flex;justify-content: space-between;">
            <div style="display: flex;">
              <div
                style="width: 5px;height: 100%;border-radius: 5px;"
                :style="{background:$store.state.settings.theme}"
              />
              <div style="width: 5px;height: 100%;border-radius: 5px;"
                :style="{background:$store.state.settings.theme}" />
              <div style="margin-left: 8px;">往来单位</div>
            </div>

@@ -22,62 +20,38 @@

          </div>

          <el-tree
            ref="treeLeftRef"
            style="padding: 10px;overflow: auto"
            :style="{height:(tableHeight+222)+'px'}"
            :data="treeLeft"
            node-key="code"
            highlight-current
            :props="defaultPropsLeft"
            :default-expand-all="true"
            :expand-on-click-node="false"
            @node-click="getTCunstomerData"
          >
          <el-tree ref="treeLeftRef" style="padding: 10px;overflow: auto" :style="{height:(tableHeight+222)+'px'}"
            :data="treeLeft" node-key="code" highlight-current :props="defaultPropsLeft" :default-expand-all="true"
            :expand-on-click-node="false" @node-click="getTCunstomerData">
            <span slot-scope="{ node, data }" class="custom-tree-node">
              <span v-if="!data.isEdit">{{ data.name }}</span>
              <span v-if="!data.isEdit">
                <el-tooltip v-del-tab-index class="item" effect="dark" content="编辑" placement="top">
                  <i
                    v-if="data.code!=='-1'"
                    class="el-icon-edit"
                    style="margin-right:10px;color: #999"
                    @click.stop="treeEditClick(node,data,'edit')"
                  />
                  <i v-if="data.code!=='-1'" class="el-icon-edit" style="margin-right:10px;color: #999"
                    @click.stop="treeEditClick(node,data,'edit')" />
                </el-tooltip>
                <el-tooltip v-del-tab-index class="item" effect="dark" content="删除" placement="top">
                  <i
                    v-if="data.code!=='-1'"
                    class="el-icon-delete"
                    style="margin-right: 4px;color: #999"
                    @click.stop="treeDeleteClick(node,data)"
                  />
                  <i v-if="data.code!=='-1'" class="el-icon-delete" style="margin-right: 4px;color: #999"
                    @click.stop="treeDeleteClick(node,data)" />
                </el-tooltip>
              </span>
            </span>
          </el-tree>
        </div>

        <div
          style=" width:calc(100% - 300px);"
        >
        <div style=" width:calc(100% - 300px);">
          <div class="bodyTopButtonGroup" style="justify-content: space-between">
            <el-button v-waves type="primary" icon="el-icon-circle-plus-outline" @click="add('add')">新增</el-button>
            <div style="display: flex">
              <el-button v-waves type="success" icon="el-icon-download" @click="$router.push('./../systemSetting/dataImport?fileCode=5')">导入</el-button>
              <el-button v-waves type="success" icon="el-icon-download"
                @click="$router.push('./../systemSetting/dataImport?fileCode=5')">导入</el-button>
              <el-button v-waves icon="el-icon-refresh-right" @click="syncERP">同步往来单位</el-button>

            </div>
          </div>

          <div class="bodyTopFormGroup">
            <el-form
              ref="form"
              :model="form"
              label-width="100px"
              inline
              style="display: flex;"
            >
            <el-form ref="form" :model="form" label-width="100px" inline style="display: flex;">
              <div class="elForm">
                <el-form-item label="往来单位编码" style=" display: flex;">
                  <el-input v-model="form.customercode" placeholder="请输入" style="width: 200px" />
@@ -107,24 +81,15 @@
                <!--                  <el-input v-model="form.username" placeholder="请输入" style="width: 200px" />-->
                <!--                </el-form-item>-->
              </div>
              <div
                class="bodySearchReset"
                :style="{marginLeft:$store.state.app.sidebar.opened? $store.state.settings.menuIsHorizontal?'15%':'3%':'10%'}"
              >
                <el-button
                  v-waves
                  type="primary"
                  icon="el-icon-search"
                  @click="getTCunstomerData($refs.treeLeftRef.getCurrentNode())"
                >查询
              <div class="bodySearchReset"
                :style="{marginLeft:$store.state.app.sidebar.opened? $store.state.settings.menuIsHorizontal?'15%':'3%':'10%'}">
                <el-button v-waves type="primary" icon="el-icon-search"
                  @click="getTCunstomerData($refs.treeLeftRef.getCurrentNode())">查询
                </el-button>
                <el-button v-waves type="info" icon="el-icon-refresh" @click="reset">重置</el-button>
              </div>
            </el-form>
            <div
              class="bodyTopFormExpand"
              style="height: 5px;"
            >
            <div class="bodyTopFormExpand" style="height: 5px;">
              <!--              <svg-icon-->
              <!--                v-show="mouseHoverType==='mouseout'"-->
              <!--                style="cursor: pointer"-->
@@ -142,81 +107,34 @@
          </div>

          <div class="elTableDiv">
            <el-table
              ref="tableDataRef"
              class="tableFixed"
              :data="tableData"
              :height="isExpandForm?tableHeight:(tableHeight+80)+'px'"
              border
              row-class-name="custom-row"
              :style="{width: 100+'%',height:isExpandForm?tableHeight:(tableHeight+80)+'px',}"
              highlight-current-row
              :header-cell-style="this.$headerCellStyle"
              :cell-style="this.$cellStyle"
              @sort-change="sortChange"
            >
            <el-table ref="tableDataRef" class="tableFixed" :data="tableData"
              :height="isExpandForm?tableHeight:(tableHeight+80)+'px'" border row-class-name="custom-row"
              :style="{width: 100+'%',height:isExpandForm?tableHeight:(tableHeight+80)+'px',}" highlight-current-row
              :header-cell-style="this.$headerCellStyle" :cell-style="this.$cellStyle" @sort-change="sortChange">
              <!--            prop="RowNum"-->
              <el-table-column
                prop="rowNum"
                width="50"
                fixed
                label="序号"
              />
              <el-table-column
                prop="code"
                label="往来单位编码"
                sortable="custom"
              />
              <el-table-column
                prop="name"
                label="往来单位名称"
                show-overflow-tooltip
                sortable="custom"
              />
              <el-table-column prop="rowNum" width="50" fixed label="序号" />
              <el-table-column prop="code" label="往来单位编码" sortable="custom" />
              <el-table-column prop="name" label="往来单位名称" show-overflow-tooltip sortable="custom" />

              <el-table-column
                prop="customertypename"
                label="所属类别"
                sortable="custom"
              />
              <el-table-column prop="customertypename" label="所属类别" sortable="custom" />

              <el-table-column
                prop="status"
                label="状态"
                width="110"
                sortable="custom"
              >
              <el-table-column prop="status" label="状态" width="110" sortable="custom">
                <template slot-scope="{row}">
                  <el-tag v-if="row.status==='0'" size="small" type="success">正常</el-tag>
                  <el-tag v-if="row.status==='1'" size="small" type="danger">停用</el-tag>
                </template>
              </el-table-column>
              <el-table-column
                prop="conttacts"
                label="联系人"
                sortable="custom"
                width="110"
              >
              <el-table-column prop="conttacts" label="联系人" sortable="custom" width="110">
                <template slot-scope="{row}">
                  {{ row.conttacts?row.conttacts:'/' }}
                </template>
              </el-table-column>
              <el-table-column
                prop="conttphone"
                label="联系方式"
                sortable="custom"
                width="110"
              >
              <el-table-column prop="conttphone" label="联系方式" sortable="custom" width="110">
                <template slot-scope="{row}">
                  {{ row.conttphone?row.conttphone:'/' }}
                </template>
              </el-table-column>
              <el-table-column
                prop="addr"
                label="地址"
                sortable="custom"
                width="110"
              >
              <el-table-column prop="addr" label="地址" sortable="custom" width="110">
                <template slot-scope="{row}">
                  {{ row.addr?row.addr:'/' }}
                </template>
@@ -227,39 +145,18 @@
              <!--                sortable="custom"-->
              <!--                width="110"-->
              <!--              />-->
              <el-table-column
                label="创建人员"
                prop="username"
                sortable="custom"
                width="110"
              />
              <el-table-column
                label="创建时间"
                prop="lm_date"
                sortable="custom"
                width="160"
              />
              <el-table-column label="创建人员" prop="username" sortable="custom" width="110" />
              <el-table-column label="创建时间" prop="lm_date" sortable="custom" width="160" />

              <el-table-column
                label="操作"
                width="120"
                fixed="right"
              >
              <el-table-column label="操作" width="120" fixed="right">
                <template slot-scope="{row}">
                  <div class="operationClass">
                    <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                      <i
                        class="el-icon-edit-outline"
                        :style="{color:$store.state.settings.theme}"
                        @click="edit('edit',row)"
                      />
                      <i class="el-icon-edit-outline" :style="{color:$store.state.settings.theme}"
                        @click="edit('edit',row)" />
                    </el-tooltip>
                    <el-tooltip v-del-tab-index class="item" effect="dark" content="删除" placement="top">
                      <i
                        class="el-icon-delete"
                        :style="{color:$store.state.settings.theme}"
                        @click="del(row)"
                      />
                      <i class="el-icon-delete" :style="{color:$store.state.settings.theme}" @click="del(row)" />
                    </el-tooltip>
                  </div>
                </template>
@@ -268,31 +165,17 @@
          </div>

          <!--分页-->
          <pagination
            :total="total"
            :page.sync="form.page"
            :limit.sync="form.rows"
            align="right"
            layout="total,prev, pager, next,sizes,jumper"
            popper-class="select_bottom"
            @pagination="getTCunstomerData($refs.treeLeftRef.getCurrentNode())"
          />
          <pagination :total="total" :page.sync="form.page" :limit.sync="form.rows" align="right"
            layout="total,prev, pager, next,sizes,jumper" popper-class="select_bottom"
            @pagination="getTCunstomerData($refs.treeLeftRef.getCurrentNode())" />

        </div>
      </div>
    </div>

    <!--    往来类别新增修改-->
    <el-dialog
      v-el-drag-dialog
      :title="operation==='add'?'新增':'编辑'"
      :visible.sync="dialogClassVisible"
      width="800px"
      :close-on-click-modal="false"
      top="15vh"
      @closed="handleClassClose"
      @close="handleClassClose"
    >
    <el-dialog v-el-drag-dialog :title="operation==='add'?'新增':'编辑'" :visible.sync="dialogClassVisible" width="800px"
      :close-on-click-modal="false" top="15vh" @closed="handleClassClose" @close="handleClassClose">
      <el-form ref="dialogClassForm" inline :rules="dialogClassFormRules" :model="dialogClassForm" label-width="80px">
        <el-form-item label="分类编码" prop="customerclasscode">
          <el-input v-model="dialogClassForm.customerclasscode" :disabled="operation!=='add'" style="width: 200px" />
@@ -301,19 +184,9 @@
          <el-input v-model="dialogClassForm.customerclassname" style="width: 200px" />
        </el-form-item>
        <el-form-item label="上级分类">
          <el-select
            v-model="dialogClassForm.parentcode"
            style="width:200px"
            placeholder="请选择"
            :popper-append-to-body="false"
            clearable
          >
            <el-option
              v-for="item in treeLeftArr"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            />
          <el-select v-model="dialogClassForm.parentcode" style="width:200px" placeholder="请选择"
            :popper-append-to-body="false" clearable>
            <el-option v-for="item in treeLeftArr" :key="item.code" :label="item.name" :value="item.code" />
          </el-select>
        </el-form-item>
      </el-form>
@@ -321,28 +194,15 @@
      <span slot="footer" class="dialog-footer">
        <div class="footerButton">
          <el-button v-waves @click="dialogVisibleClassCancel">取 消</el-button>
          <el-button
            v-waves
            type="primary"
            :loading="$store.state.app.buttonIsDisabled"
            :disabled="$store.state.app.buttonIsDisabled"
            @click="dialogVisibleClassConfirm"
          >确 定</el-button>
          <el-button v-waves type="primary" :loading="$store.state.app.buttonIsDisabled"
            :disabled="$store.state.app.buttonIsDisabled" @click="dialogVisibleClassConfirm">确 定</el-button>
        </div>
      </span>
    </el-dialog>

    <!--    往来单位新增修改-->
    <el-dialog
      v-el-drag-dialog
      :title="operation==='add'?'新增':'编辑'"
      :visible.sync="dialogVisible"
      width="800px"
      :close-on-click-modal="false"
      top="15vh"
      @closed="handleClose"
      @close="handleClose"
    >
    <el-dialog v-el-drag-dialog :title="operation==='add'?'新增':'编辑'" :visible.sync="dialogVisible" width="800px"
      :close-on-click-modal="false" top="15vh" @closed="handleClose" @close="handleClose">

      <el-form ref="dialogForm" class="" inline :rules="dialogFormRules" :model="dialogForm" label-width="110px">
        <!--        <el-divider content-position="left">基本信息</el-divider>-->
@@ -354,19 +214,9 @@
        </el-form-item>

        <el-form-item label="所属类别" prop="customerclasscode">
          <el-select
            v-model="dialogForm.customerclasscode"
            style="width:200px"
            placeholder="请选择"
            filterable
            :popper-append-to-body="false"
          >
            <el-option
              v-for="item in treeLeftArr"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            />
          <el-select v-model="dialogForm.customerclasscode" style="width:200px" placeholder="请选择" filterable
            :popper-append-to-body="false">
            <el-option v-for="item in treeLeftArr" :key="item.code" :label="item.name" :value="item.code" />
          </el-select>
        </el-form-item>

@@ -383,12 +233,8 @@
          <el-input v-model="dialogForm.conttphone" style="width: 200px" />
        </el-form-item>
        <el-form-item label="地址">
          <el-input
            v-model="dialogForm.addr"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4}"
            style="width: 520px;"
          />
          <el-input v-model="dialogForm.addr" type="textarea" :autosize="{ minRows: 2, maxRows: 4}"
            style="width: 520px;" />
        </el-form-item>

      </el-form>
@@ -396,13 +242,8 @@
      <span slot="footer" class="dialog-footer">
        <div class="footerButton">
          <el-button v-waves @click="dialogVisibleCancel">取 消</el-button>
          <el-button
            v-waves
            type="primary"
            :loading="$store.state.app.buttonIsDisabled"
            :disabled="$store.state.app.buttonIsDisabled"
            @click="dialogVisibleConfirm"
          >确 定</el-button>
          <el-button v-waves type="primary" :loading="$store.state.app.buttonIsDisabled"
            :disabled="$store.state.app.buttonIsDisabled" @click="dialogVisibleConfirm">确 定</el-button>
        </div>
      </span>
    </el-dialog>
@@ -413,7 +254,9 @@
<script>
import waves from '@/directive/waves'
import Pagination from '@/components/Pagination'
import { validateCode } from '@/utils/global'
  import {
    validateCode
  } from '@/utils/global'
import elDragDialog from '@/directive/el-drag-dialog'
import arrayToTree from 'array-to-tree'
import {
@@ -421,13 +264,19 @@
  TCunstomerClassTree,
  TCunstomerClassTreeAddUpdate,
  TCunstomerClassTreeDelete,
  TCunstomerData, TCunstomerDelete
    TCunstomerData,
    TCunstomerDelete
} from '@/api/basicSettings'
import { SeaveSearchPartner } from '@/api/ErpSyncMes'
  import {
    SeaveSearchPartner
  } from '@/api/ErpSyncMes'

export default {
  name: 'ContactUnitList',
  directives: { waves, elDragDialog },
    directives: {
      waves,
      elDragDialog
    },
  components: {
    Pagination
  },
@@ -439,12 +288,10 @@
      tableHeight: 0,
      operation: '',

      treeLeft: [
        {
        treeLeft: [{
          code: '-1',
          name: '全部'
        }
      ], // 左侧树
        }], // 左侧树
      treeLeftArr: [],
      defaultPropsLeft: {
        children: 'children',
@@ -473,12 +320,16 @@
      },
      classArr: [],
      dialogClassFormRules: {
        customerclasscode: [
          { required: true, validator: validateCode, trigger: ['blur', 'change'] }
        ],
        customerclassname: [
          { required: true, message: '请输往来单位名称', trigger: ['blur', 'change'] }
        ]
          customerclasscode: [{
            required: true,
            validator: validateCode,
            trigger: ['blur', 'change']
          }],
          customerclassname: [{
            required: true,
            message: '请输往来单位名称',
            trigger: ['blur', 'change']
          }]
      },

      dialogVisible: false,
@@ -494,21 +345,31 @@
        OperType: '' // 操作类型
      },
      dialogFormRules: {
        customercode: [
          { required: true, validator: validateCode, trigger: ['blur', 'change'] }
        ],
        customername: [
          { required: true, message: '请输入往来单位名称', trigger: ['blur', 'change'] }
        ],
        customerclasscode: [
          { required: true, message: '请选择所属类别', trigger: ['blur', 'change'] }
        ]
          customercode: [{
            required: true,
            validator: validateCode,
            trigger: ['blur', 'change']
          }],
          customername: [{
            required: true,
            message: '请输入往来单位名称',
            trigger: ['blur', 'change']
          }],
          customerclasscode: [{
            required: true,
            message: '请选择所属类别',
            trigger: ['blur', 'change']
          }]

      }

    }
  },

    activated() {
      window.addEventListener('resize', this.getHeight)
      this.getHeight()
    },
  created() {

  },
@@ -559,7 +420,11 @@
        this.$refs.tableDataRef.doLayout()
      })
    },
    sortChange({ column, prop, order }) {
      sortChange({
        column,
        prop,
        order
      }) {
      if (order === 'descending') {
        order = 'desc'
      } else if (order === 'ascending') {
@@ -601,7 +466,10 @@
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        TCunstomerDelete({ customercode: row.code, data_sources: row.data_sources }).then(res => {
          TCunstomerDelete({
            customercode: row.code,
            data_sources: row.data_sources
          }).then(res => {
          if (res.code === '200') {
            this.$notify.success('删除成功!')
            this.getTCunstomerData(this.$refs.treeLeftRef.getCurrentNode())
@@ -682,7 +550,9 @@
        type: 'warning'
      }).then(() => {
        const result = this.getChildrenCodeMethod(data, [])
        TCunstomerClassTreeDelete({ customerclasscode: result.join(',') }).then(res => {
          TCunstomerClassTreeDelete({
            customerclasscode: result.join(',')
          }).then(res => {
          if (res.code === '200') {
            this.$notify.success('删除成功!')
            this.getTCunstomerClassTree()
@@ -819,7 +689,9 @@
//  width: 55px;
//}
//
.el-icon-plus:hover, .el-icon-edit:hover, .el-icon-delete:hover {
  .el-icon-plus:hover,
  .el-icon-edit:hover,
  .el-icon-delete:hover {
  color: #000 !important;
}
</style>