boying-vue/src/views/modules/warehouse/warehouse.vue

<template>
  <div class="mod-config">
<!--    <div>-->
<!--        <span @click="favoriteFunction()">-->
<!--         <icon-svg :name="favorite?'xiangqufill':'xiangqu'" class="sl-svg"  ></icon-svg>-->
<!--        </span>-->
<!--    </div>-->
    <el-form :inline="true" label-position="top">
      <el-form-item :label="inputLabel.headerInput.label1">
        <el-input style="width: 100px;" v-model="queryHeaderData.wareHouseId" ></el-input>
      </el-form-item>
      <el-form-item :label="inputLabel.headerInput.label2">
        <el-input style="width: 100px;" v-model="queryHeaderData.wareHouseName" ></el-input>
      </el-form-item>
      <el-form-item :label="inputLabel.headerInput.label4">
        <el-select  v-model="queryHeaderData.active" placeholder="请选择" style="width: 100px;">
          <el-option label="全部" value=""></el-option>
          <el-option
            v-for="item in selectList.select1"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item style="margin-top: 20px;">
        <el-button @click="getDataList('Y')" type="primary">{{buttons.search}}</el-button>
      </el-form-item>
      <el-form-item style="margin-top: 20px;">
        <el-button @click="initModel()" type="primary">{{buttons.add}}</el-button>
<!--        <el-button @click="userSetting" type="primary">{{ buttons.settingTable}}</el-button>-->
        <download-excel
          :fields="fields()"
          :data="exportData"
          type="xls"
          :name="exportName"
          :header="exportHeader"
          :footer="exportFooter"
          :defaultValue="exportDefaultValue"
          :fetch="createExportData"
          :before-generate="startDownload"
          :before-finish="finishDownload"
          worksheet="导出信息"
          class="el-button el-button--primary el-button--medium">
          {{buttons.download}}
        </download-excel>

        <el-button v-if="isAuth(':prd:delete')" type="danger" @click="deleteHandle()"
                   :disabled="dataListSelections.length <= 0">{{ buttons.deleteList}}
        </el-button>
      </el-form-item>
    </el-form>
    <el-table
      id="commmon"
      :height="height"
      :data="dataList"
      border
      v-loading="dataListLoading"
      @selection-change="selectionChangeHandle"
      style="width: 100%;">
      <el-table-column
        v-for="(item,index) in columnList" :key="index"
        :sortable="item.columnSortable"
        :prop="item.columnProp"
        :header-align="item.headerAlign"
        :show-overflow-tooltip="item.showOverflowTooltip"
        :align="item.align"
        :fixed="item.fixed==''?false:item.fixed"
        :min-width="item.columnWidth"
        :label="item.columnLabel">
        <template slot-scope="scope">
          <span v-if="!item.columnHidden"> {{scope.row[item.columnProp]}}</span>
          <span v-if="item.columnImage"><img :src="scope.row[item.columnProp]" style="width: 100px; height: 80px"/></span>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        header-align="center"
        align="center"
        min-width="180"
        :label="buttons.cz">
        <template slot-scope="scope">
          <el-link style="cursor: pointer" @click="initModel(scope.row)">{{buttons.edit}} | </el-link>
          <el-link style="cursor: pointer" @click="delHeaderData(scope.row)">{{buttons.delete}} | </el-link>
          <el-link style="cursor: pointer" @click="openStorageConfigDialog(scope.row)">仓储策略配置 | </el-link>
          <el-link style="cursor: pointer" @click="openAccessAuthDialog(scope.row)">权限授权</el-link>
        </template>
      </el-table-column>
    </el-table>

    <column  v-if="visible" ref="column" @refreshData="getTableUserColumn"></column>


      <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" v-drag :title="inputLabel.headerInput.label5" :visible.sync="setUp.reviewFlag" width="325px">
        <el-form :inline="true" label-position="top">
          <el-form-item :label="inputLabel.headerInput.label1">
            <el-input style="width: 130px;" :readonly = "setUp.readonlyFlag"  onkeyup="this.value = this.value.toUpperCase()"  v-model="saveHeaderData.wareHouseId"></el-input>
          </el-form-item>
          <el-form-item :label="inputLabel.headerInput.label2">
            <el-input style="width: 130px;"  v-model="saveHeaderData.wareHouseName"></el-input>
          </el-form-item>
        </el-form>
        <el-form :inline="true" label-position="top">
          <el-form-item :label="inputLabel.headerInput.label3">
            <el-select  v-model="saveHeaderData.wareHouseTypeDb" placeholder="请选择" style="width: 130px;">
              <el-option
                v-for="item in selectList.select2"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="inputLabel.headerInput.label4">
            <el-select  v-model="saveHeaderData.active" placeholder="请选择" style="width: 130px;">
              <el-option
                v-for="item in selectList.select1"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
      <el-button @click="setUp.reviewFlag = false">取消</el-button>
      <el-button type="primary" :disabled="setUp.saveButton" @click="saveHeaderFunction()">确定</el-button>
    </span>
      </el-dialog>

    <!-- 仓储策略配置对话框 -->
    <el-dialog
      title="仓储策略配置"
      :close-on-click-modal="false"
      v-drag
      :visible.sync="storageConfigDialogVisible"
      width="1100px"
      custom-class="config-dialog">
      <!-- 查询区域 -->
      <div class="search-section">
        <el-form :inline="true" size="small">
          <el-form-item label="参数代码">
            <el-input
              v-model="configQuery.configCode"
              placeholder="请输入参数代码"
              clearable
              @clear="searchAvailableConfigs"
              @keyup.enter.native="searchAvailableConfigs"
              style="width: 150px">
            </el-input>
          </el-form-item>
          <el-form-item label="参数名称">
            <el-input
              v-model="configQuery.configName"
              placeholder="请输入参数名称"
              clearable
              @clear="searchAvailableConfigs"
              @keyup.enter.native="searchAvailableConfigs"
              style="width: 150px">
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="searchAvailableConfigs" size="small">查询</el-button>
            <el-button icon="el-icon-refresh" @click="resetConfigQuery" size="small">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

      <div class="item-operation-content">
        <!-- 可选策略 -->
        <div class="item-panel available-panel">
          <div class="panel-header">
            <i class="el-icon-s-unfold"></i>
            <span class="panel-title">可选策略</span>
            <span class="item-count">({{ availableConfigList.length }})</span>
          </div>
          <el-table
            height="420px"
            :data="availableConfigList"
            ref="availableConfigTable"
            @row-click="availableConfigClickRow"
            @selection-change="availableConfigSelectionChange"
            highlight-current-row
            class="operation-table"
            :header-cell-style="{background: '#f5f7fa', color: '#606266', fontWeight: '500'}">
            <el-table-column
              type="selection"
              width="45"
              align="center">
            </el-table-column>
            <el-table-column
              prop="configType"
              headerAlign= "center"
              align="center"
              width="100"
              label="参数类型">
            </el-table-column>
            <el-table-column
              prop="configCode"
              headerAlign= "center"
              align="left"
              width="120"
              label="参数代码">
            </el-table-column>
            <el-table-column
              prop="configName"
              headerAlign= "center"
              align="left"
              min-width="150"
              show-overflow-tooltip
              label="参数名称">
            </el-table-column>
            <el-table-column
              prop="description"
              headerAlign= "center"
              align="left"
              min-width="200"
              show-overflow-tooltip
              label="详细说明">
            </el-table-column>
          </el-table>
        </div>

        <!-- 操作按钮 -->
        <div class="operation-buttons">
          <el-tooltip content="添加选中策略" placement="left">
            <el-button
              type="primary"
              icon="el-icon-d-arrow-right"
              circle
              @click="addStorageConfig"
              :disabled="!availableConfigSelections || availableConfigSelections.length === 0">
            </el-button>
          </el-tooltip>
          <el-tooltip content="移除选中策略" placement="right">
            <el-button
              type="danger"
              icon="el-icon-d-arrow-left"
              circle
              @click="removeStorageConfig"
              :disabled="!selectedConfigSelections || selectedConfigSelections.length === 0">
            </el-button>
          </el-tooltip>
        </div>

        <!-- 已配置策略 -->
        <div class="item-panel selected-panel">
          <div class="panel-header">
            <i class="el-icon-s-check"></i>
            <span class="panel-title">已配置策略</span>
            <span class="item-count">({{ selectedConfigList.length }})</span>
          </div>
          <el-table
            height="420px"
            :data="selectedConfigList"
            ref="selectedConfigTable"
            @row-click="selectedConfigClickRow"
            @selection-change="selectedConfigSelectionChange"
            highlight-current-row
            class="operation-table"
            :header-cell-style="{background: '#f5f7fa', color: '#606266', fontWeight: '500'}">
            <el-table-column
              type="selection"
              width="45"
              align="center">
            </el-table-column>
            <el-table-column
              prop="configCode"
              headerAlign= "center"
              align="left"
              width="120"
              label="参数代码">
            </el-table-column>
            <el-table-column
              prop="configName"
              headerAlign= "center"
              align="left"
              min-width="200"
              show-overflow-tooltip
              label="参数名称">
            </el-table-column>
          </el-table>
        </div>
      </div>

      <!-- 底部按钮 -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="storageConfigDialogVisible = false" size="small" style="width: 80px;">关闭</el-button>
      </div>
    </el-dialog>

    <!-- 权限授权对话框 -->
    <el-dialog
      title="权限授权"
      :close-on-click-modal="false"
      v-drag
      :visible.sync="accessAuthDialogVisible"
      width="1000px"
      custom-class="config-dialog">
      <!-- 查询区域 -->
      <div class="search-section">
        <el-form :inline="true" size="small">
          <el-form-item label="用户编码">
            <el-input
              v-model="userQuery.username"
              placeholder="请输入用户编码"
              clearable
              @clear="searchAvailableUsers"
              @keyup.enter.native="searchAvailableUsers"
              style="width: 150px">
            </el-input>
          </el-form-item>
          <el-form-item label="用户名称">
            <el-input
              v-model="userQuery.userDisplay"
              placeholder="请输入用户名称"
              clearable
              @clear="searchAvailableUsers"
              @keyup.enter.native="searchAvailableUsers"
              style="width: 150px">
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="searchAvailableUsers" size="small">查询</el-button>
            <el-button icon="el-icon-refresh" @click="resetUserQuery" size="small">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

      <div class="item-operation-content">
        <!-- 可选用户 -->
        <div class="item-panel auth-panel">
          <div class="panel-header">
            <i class="el-icon-user"></i>
            <span class="panel-title">可选用户</span>
            <span class="item-count">({{ availableUserList.length }})</span>
          </div>
          <el-table
            height="420px"
            :data="availableUserList"
            ref="availableUserTable"
            @row-click="availableUserClickRow"
            @selection-change="availableUserSelectionChange"
            highlight-current-row
            class="operation-table"
            :header-cell-style="{background: '#f5f7fa', color: '#606266', fontWeight: '500'}">
            <el-table-column
              type="selection"
              width="45"
              align="center">
            </el-table-column>
            <el-table-column
              prop="username"
              headerAlign= "center"
              align="left"
              min-width="100"
              label="用户编码">
            </el-table-column>
            <el-table-column
              prop="userDisplay"
              headerAlign= "center"
              align="left"
              min-width="200"
              show-overflow-tooltip
              label="用户名称">
            </el-table-column>
          </el-table>
        </div>

        <!-- 操作按钮 -->
        <div class="operation-buttons">
          <el-tooltip content="添加选中用户" placement="left">
            <el-button
              type="primary"
              icon="el-icon-d-arrow-right"
              circle
              @click="addAccessAuth"
              :disabled="!availableUserSelections || availableUserSelections.length === 0">
            </el-button>
          </el-tooltip>
          <el-tooltip content="移除选中用户" placement="right">
            <el-button
              type="danger"
              icon="el-icon-d-arrow-left"
              circle
              @click="removeAccessAuth"
              :disabled="!selectedUserSelections || selectedUserSelections.length === 0">
            </el-button>
          </el-tooltip>
        </div>

        <!-- 已授权用户 -->
        <div class="item-panel auth-panel">
          <div class="panel-header">
            <i class="el-icon-s-check"></i>
            <span class="panel-title">已授权用户</span>
            <span class="item-count">({{ selectedUserList.length }})</span>
          </div>
          <el-table
            height="420px"
            :data="selectedUserList"
            ref="selectedUserTable"
            @row-click="selectedUserClickRow"
            @selection-change="selectedUserSelectionChange"
            highlight-current-row
            class="operation-table"
            :header-cell-style="{background: '#f5f7fa', color: '#606266', fontWeight: '500'}">
            <el-table-column
              type="selection"
              width="45"
              align="center">
            </el-table-column>
            <el-table-column
              prop="userid"
              headerAlign= "center"
              align="left"
              min-width="100"
              label="用户编码">
            </el-table-column>
            <el-table-column
              prop="userName"
              headerAlign= "center"
              align="left"
              min-width="200"
              show-overflow-tooltip
              label="用户名称">
            </el-table-column>
          </el-table>
        </div>
      </div>

      <!-- 底部按钮 -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="accessAuthDialogVisible = false" size="small" style="width: 80px;">关闭</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>

import column from "../common/column";
  import {
    searchSysLanguagePackList,
    searchSysLanguageParam,
    searchFunctionButtonList,
    saveButtonList,
    searchSysLanguage,
    searchLanguageListByLanguageCode,
    saveSysLanguageOne
  } from "@/api/sysLanguage.js"
  import getLodop from '@/utils/LodopFuncs.js'
  import {
    saveTableDefaultList,
    saveTableUser,
    getTableDefaultListLanguage,
    getTableUserListLanguage,
    removerDefault,
    removerUser
  } from "@/api/table.js"
  import {
    userFavoriteList,
    saveUserFavorite,
    removeUserFavorite,
  } from '@/api/userFavorite.js'
import {
  getWarehouseList,
  saveWarehouse,
  delWarehouse,
  getWareHouseTypeList,
  getStorageZoneConfigList,
  getWarehouseStorageConfigList,
  saveWarehouseStorageConfig,
  deleteWarehouseStorageConfig,
  getUserList,
  getAccessWarehouseList,
  saveAccessWarehouse,
  deleteAccessWarehouse,
} from '@/api/warehouse/warehouse.js'

  export default {
    components: {
      column
    },
    data() {
      return {
        saveHeaderData :{
          id : 0,
          wareHouseId : '',
          wareHouseName : '',
          wareHouseType : '',
          active : '',
          wareHouseTypeDb : '',
        },
        queryHeaderData : {
          site : this.$store.state.user.site,
          wareHouseId : '',
          wareHouseName : '',
          wareHouseType : '',
          active : '',
        },
        setUp: {
          reviewFlag: false,
          saveButton: false,
          reviewFlag1 : false,
          readonlyFlag : false,
        },
        inputLabel :{
          headerInput : {
            label1 : '仓库编码',
            label2 : '仓库名称',
            label3 : '仓库类型',
            label4 : '使用状态',
            label5 : '仓库信息',
          },
        },
        selectList: {
          select1: [{
            value: 'Y',
            label: '启用'
          }, {
            value: 'N',
            label: '禁用'
          }],
          select2: [],
        },
        site : this.$store.state.user.site,
        userName : this.$store.state.user.name,
        // table高度
        height:450,
        // 是否收藏
        favorite: false,
        addLanguage: false,
        functionId: this.$route.meta.menuId,
        tableId: this.$route.meta.menuId + 'WAHO01',
        value1: true,
        visible: false,
        showDefault: true,
        // 默认table 查询参数
        queryTable: {
          functionId: this.$route.meta.menuId,
          tableId: this.$route.meta.menuId + 'WAHO01',
          languageCode: this.$i18n.locale
        },
        // 用户table 查询参数
        queryTableUser: {
          userId: this.$store.state.user.name,
          functionId: this.$route.meta.menuId,
          tableId: this.$route.meta.menuId + 'WAHO01',
          status: true,
          languageCode: this.$i18n.locale
        },
        // 语言词典查询参数
        querySysLanguageParam: {
          languageCode: this.$i18n.locale
        },
        // 语言词典集合
        sysLanguageParams: [],
        // 用户table 配置集合
        userColumnList: [],
        // 展示列集
        columnList: [
          {
            userId: this.$store.state.user.name,
            serialNumber: 'wareHouse2501WareHouseId',
            tableId: this.$route.meta.menuId + 'WAHO01',
            tableName: "wareHouseTable",
            columnProp: "wareHouseId",
            headerAlign: "center",
            align: "center",
            columnLabel: "仓库编码",
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            sortLv: 0,
            status: true,
            fixed: '',
            columnWidth : 100,
          },
          {
            userId: this.$store.state.user.name,
            serialNumber: 'wareHouse2501WareHouseName',
            tableId: this.$route.meta.menuId + 'WAHO01',
            tableName: "wareHouseTable",
            columnProp: "wareHouseName",
            headerAlign: "center",
            align: "left",
            columnLabel: "仓库名称",
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            sortLv: 0,
            status: true,
            fixed: '',
            columnWidth : 200,
          },
          {
            userId: this.$store.state.user.name,
            serialNumber: 'wareHouse2501WareHouseType',
            tableId: this.$route.meta.menuId + 'WAHO01',
            tableName: "wareHouseTable",
            columnProp: "wareHouseTypeDb",
            headerAlign: "center",
            align: "center",
            columnLabel: "库房编码",
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            sortLv: 0,
            status: true,
            fixed: '',
            columnWidth : 80,
          },
          {
            userId: this.$store.state.user.name,
            serialNumber: 'wareHouse2501WareHouseTypeDb',
            tableId: this.$route.meta.menuId + 'WAHO01',
            tableName: "wareHouseTable",
            columnProp: "wareHouseType",
            headerAlign: "center",
            align: "center",
            columnLabel: "库房类型",
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            sortLv: 0,
            status: true,
            fixed: '',
            columnWidth : 120,
          },
         /* {
            userId: this.$store.state.user.name,
            functionId: this.$route.meta.menuId,
            serialNumber: 'wareHouse2501Keeper',
            tableId: this.$route.meta.menuId + 'WAHO01',
            tableName: "wareHouseTable",
            columnProp: "keeper",
            headerAlign: "center",
            align: "center",
            columnLabel: "管理人",
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            sortLv: 0,
            status: true,
            fixed: '',
          },
          {
            userId: this.$store.state.user.name,
            functionId: this.$route.meta.menuId,
            serialNumber: 'wareHouse2501CompanyId',
            tableId: this.$route.meta.menuId + 'WAHO01',
            tableName: "wareHouseTable",
            columnProp: "companyId",
            headerAlign: "center",
            align: "center",
            columnLabel: "公司编码",
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            sortLv: 0,
            status: true,
            fixed: '',
          },*/
          {
            userId: this.$store.state.user.name,
            serialNumber: 'wareHouse2501StrActive',
            tableId: this.$route.meta.menuId + 'WAHO01',
            tableName: "wareHouseTable",
            columnProp: "strActive",
            headerAlign: "center",
            align: "center",
            columnLabel: "状态",
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            sortLv: 0,
            status: true,
            fixed: '',
            columnWidth : 80,
          },
        ],
        // 展示列集
        columnList1: [
          // {
          //   userId: this.$store.state.user.name,
          //   functionId: this.$route.meta.menuId,
          //   tableId: "common1002",
          //   tableName: "commonLanguage",
          //   columnProp: "functionId",
          //   headerAlign: "center",
          //   align: "center",
          //   columnLabel: "功能编码",
          //   columnHidden: false,
          //   columnImage: false,
          //   columnSortable: false,
          //   sortLv: 0,
          //   status: true,
          //   fixed: false
          // },
          // {
          //   userId: this.$store.state.user.name,
          //   functionId: this.$route.meta.menuId,
          //   tableId: "common1002",
          //   tableName: "commonLanguage",
          //   columnProp: "objectId",
          //   headerAlign: "center",
          //   align: "center",
          //   columnLabel: "序列化编码",
          //   columnHidden: false,
          //   columnImage: false,
          //   columnSortable: false,
          //   sortLv: 0,
          //   status: true,
          //   fixed: '',
          // },
          // {
          //   userId: this.$store.state.user.name,
          //   functionId: this.$route.meta.menuId,
          //   tableId: "common1002",
          //   tableName: "commonLanguage",
          //   columnProp: "objectType",
          //   headerAlign: "center",
          //   align: "center",
          //   columnLabel: "类型",
          //   columnHidden: false,
          //   columnImage: false,
          //   columnSortable: false,
          //   sortLv: 0,
          //   status: true,
          //   fixed: '',
          // },
          // {
          //   userId: this.$store.state.user.name,
          //   functionId: this.$route.meta.menuId,
          //   tableId: "common1002",
          //   tableName: "commonLanguage",
          //   columnProp: "languageValue",
          //   headerAlign: "center",
          //   align: "center",
          //   columnLabel: "语言值",
          //   columnHidden: false,
          //   columnImage: false,
          //   columnSortable: false,
          //   sortLv: 0,
          //   status: true,
          //   fixed: '',
          // },
          // {
          //   userId: this.$store.state.user.name,
          //   functionId: this.$route.meta.menuId,
          //   tableId: "common1002",
          //   tableName: "commonLanguage",
          //   columnProp: "languageCode",
          //   headerAlign: "center",
          //   align: "center",
          //   columnLabel: "语言编码",
          //   columnHidden: false,
          //   columnImage: false,
          //   columnSortable: false,
          //   sortLv: 0,
          //   status: true,
          //   fixed: '',
          // }
        ],
        // 数据集
        dataList: [],
        queryButton: {
          functionId: this.$route.meta.menuId,
          tableId: this.$route.meta.menuId + 'WAHO01',
          languageCode: this.$i18n.locale,
          objectType: 'button'
        },
        buttons: {
          add: '新增',
          edit: '编辑',
          delete: '删除',
          deleteList: '批量删除',
          cz: '操作',
          search: '查询',
          download: '导出',
          settingTable: '设置列表',
          defaultTable: '设置默认配置'
        },
        // 导出 start
        exportData: [],
        exportName: "页面功能语言",
        exportHeader: ["页面功能语言"],
        exportFooter: [],
        exportDefaultValue: "",
        // 导出 end
        buttonList: [
          {
            languageValue: '新增',
            objectId: 'add',
            objectType: "button",
            tableId: this.$route.meta.menuId + 'WAHO01',
          },
          {
            languageValue: '编辑',
            objectId: 'edit',
            objectType: "button",
            tableId: this.$route.meta.menuId + 'WAHO01',
          },
          {
            languageValue: '删除',
            objectId: 'delete',
            objectType: "button",
            tableId: this.$route.meta.menuId + 'WAHO01',
          },
          // {
          //
          //   languageValue: '批量删除',
          //   objectId: 'deleteList',
          //   objectType: "button",
          //   tableId: this.$route.meta.menuId + 'WAHO01',
          // },
          {
            languageValue: '操作',
            objectId: 'cz',
            objectType: "button",
            tableId: this.$route.meta.menuId + 'WAHO01',
          },
          {
            languageValue: '查询',
            objectId: 'search',
            objectType: "button",
            tableId: this.$route.meta.menuId + 'WAHO01',
          },
          {
            languageValue: '导出',
            objectId: 'download',
            objectType: "button",
            tableId: this.$route.meta.menuId + 'WAHO01',
          },
          {
            languageValue: '设置列表',
            objectId: 'settingTable',
            objectType: "button",
            tableId: this.$route.meta.menuId + 'WAHO01',
          },
          {
            languageValue: '设置默认配置',
            objectId: 'defaultTable',
            objectType: "button",
            tableId: this.$route.meta.menuId + 'WAHO01',
          }
        ],
        languageList: [],
        languageColumnList: [],
        languageDataList: [],
        queryLanguage: {},
        // 数据集条件
        querySysLanguagePack: {
          functionId: '',
          page: 1,
          limit: 1,
          languageValue: '',
          objectType: '',
          objectId: ''
        },
        // 分页
        pageIndex: 1,
        pageSize: 20,
        totalPage: 0,
        dataListLoading: false,
        dataListSelections: [],
        addOrUpdateVisible: false,
        // 仓储策略配置相关
        storageConfigDialogVisible: false,
        currentWarehouse: null,
        availableConfigList: [],
        availableConfigListAll: [], // 保存所有可选策略
        selectedConfigList: [],
        availableConfigSelections: [],
        selectedConfigSelections: [],
        configQuery: {
          configCode: '',
          configName: ''
        },
        // 权限授权相关
        accessAuthDialogVisible: false,
        availableUserList: [],
        availableUserListAll: [], // 保存所有可选用户
        selectedUserList: [],
        availableUserSelections: [],
        selectedUserSelections: [],
        userQuery: {
          username: '',
          userDisplay: ''
        }
      }
    },
    mounted() {
      this.$nextTick(()=>{
        this.height = window.innerHeight - 170;
      })
    },
    activated() {
      this.getTblBaseList()
      this.getDataList()
      this.getLanguageList()
    },
    methods: {
      getTblBaseList(){
        let jsonDate = {
          site : this.site,
          type : 'WareHouseType'
        }
        this.selectList.select2 = []
        getWareHouseTypeList(jsonDate).then(({data}) =>{
          let list = data.list
          this.selectList.select2 = list.map(item =>{
            let resultData = {
              value: item.baseData,
              label : item.baseDesc,
            }
            return resultData
          })
        })
      },
      delHeaderData(row){
        this.$confirm(`确定删除该仓库及库位?`, '操作提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let jsonData ={
            site : row.site,
            wareHouseId : row.wareHouseId,
          }
          delWarehouse(jsonData).then(({data}) =>{
            if(data.code == 0){
              this.$message.success(data.msg)
              this.getDataList()
            }else {
              this.$alert(data.msg, '操作提示', {
                confirmButtonText: '确定',
                callback: action => {

                }
              });
            }
          })
        })
      },
      saveHeaderFunction(){
        this.setUp.saveButton = true
        if(this.saveHeaderData.wareHouseId == ''){
          this.$alert("请输入库房编码！", '操作提示', {
            confirmButtonText: '确定',
            callback: action => {
              this.setUp.saveButton = false
            }
          });
          return
        }else if(this.saveHeaderData.wareHouseName == ''){
          this.$alert("请输入库房名称！", '操作提示', {
            confirmButtonText: '确定',
            callback: action => {
              this.setUp.saveButton = false
            }
          });
          return
        }else if(this.saveHeaderData.wareHouseTypeDb == ''){
          this.$alert("请选择库位类型！", '操作提示', {
            confirmButtonText: '确定',
            callback: action => {
              this.setUp.saveButton = false
            }
          });
          return
        }
        for (let i = 0; i < this.selectList.select2.length; i++) {
          if(this.selectList.select2[i].value == this.saveHeaderData.wareHouseTypeDb){
            this.saveHeaderData.wareHouseType = this.selectList.select2[i].label
          }
        }
        saveWarehouse(this.saveHeaderData).then(({data}) =>{
          this.setUp.saveButton = false
          if(data.code == 0){
            this.$message.success(data.msg)
            this.getDataList()
            this.setUp.reviewFlag = false
          }else {
            this.$alert(data.msg, '操作提示', {
              confirmButtonText: '确定',
              callback: action => {

              }
            });
          }
        })
      },
      initModel(row){
        this.setUp.reviewFlag = true
        this.setUp.saveButton = false
        this.setUp.readonlyFlag = false
        this.saveHeaderData.id = 0
        this.saveHeaderData.site = this.site
        this.saveHeaderData.wareHouseId = ''
        this.saveHeaderData.wareHouseName = ''
        this.saveHeaderData.wareHouseType = ''
        this.saveHeaderData.wareHouseTypeDb = ''
        this.saveHeaderData.active = 'Y'
        this.saveHeaderData.useLocation = 'Y'
        this.saveHeaderData.validStock = 'Y'
        this.saveHeaderData.keeper = ''
        this.saveHeaderData.companyId = ''
        if(row != null){
          this.setUp.readonlyFlag = true
          this.saveHeaderData.id = 1
          this.saveHeaderData.wareHouseId = row.wareHouseId
          this.saveHeaderData.wareHouseName = row.wareHouseName
          this.saveHeaderData.wareHouseType = row.wareHouseType
          this.saveHeaderData.wareHouseTypeDb = row.wareHouseTypeDb
          this.saveHeaderData.active = row.active
        }
      },
      // 打印方式
      printReport(){
        alert( this.$store.state.user.site)
        //
        // const LODOP = getLodop()
        // if (LODOP) {
        //   var strBodyStyle = '<style>'
        //   strBodyStyle += 'table { border-top: 1 solid #000000; border-left: 1 solid #000000;  border-collapse:collapse;  border-spacing:0;}'
        //   strBodyStyle += 'caption {  line-height:2em; }'
        //   strBodyStyle += 'td { border-right: 1 solid #000000; border-bottom: 1 solid #000000; text-align:center; padding:2px 3px; font-size:11px;}'
        //   strBodyStyle += '</style>' //设置打印样式
        //   var strFormHtml = strBodyStyle + '<body>' + document.getElementById('commmon').innerHTML + '</body>'   //获取打印内容
        //
        //   LODOP.PRINT_INIT('')  //初始化
        //   LODOP.PRINT_DESIGN();
        //   //LODOP.PREVIEW();
        //   //LODOP.PRINT();
        //
        //   LODOP.SET_PRINT_PAGESIZE(2, 0, 0, 'A4')  //设置横向
        //   LODOP.ADD_PRINT_HTM('1%', '1%', '98%', '98%', strFormHtml)    //设置打印内容
        //   LODOP.SET_PREVIEW_WINDOW(2, 0, 0, 800, 600, '')  //设置预览窗口模式和大小
        //   LODOP.PREVIEW()
        // }
      },
      // 校验用户是否收藏
      favoriteIsOk(){
        let userFavorite ={
          userId:this.$store.state.user.id,
          languageCode:this.$i18n.locale
        }
        userFavoriteList(userFavorite).then(({data}) =>{
          let size = data.list.filter(item => item.userId==userFavorite.menuId).length;
          if (size>0){
            this.favorite = true
          }else {
            this.favorite = false
          }
        })
      },
      // 收藏 OR 取消收藏
      favoriteFunction(){
        let userFavorite ={
          userId: this.$store.state.user.id,
          functionId: this.$route.meta.menuId,
        }
        if (this.favorite){
          // 取消收藏
          this.$confirm(`确定取消收藏`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            removeUserFavorite(userFavorite).then(({data})=>{
              this.$message.success(data.msg)
              this.favorite = false
            })
          })
        }else {
          // 收藏
          saveUserFavorite(userFavorite).then(({data})=>{
            this.$message.success(data.msg)
            this.favorite = true
          })
        }

      },
      // 保存语言编辑
      saveLanguageList(val) {
        saveSysLanguageOne(val).then(({data}) => {
          if (data.code == 0) {
            this.$message.success(data.msg)
          } else {
            this.$message.error(data.msg)
          }
        })
      },
      // 编辑语言
      addLanguageFun() {
        if (this.querySysLanguagePack.languageCode) {
          this.addLanguage = true
          this.languageColumnList = []
          let query = {
            functionId: this.$route.meta.menuId,
            tableId: "common1002",
            languageCode: this.$i18n.locale
          }
          getTableDefaultListLanguage(query).then(({data}) => {
            if (data.rows.length > 0) {
              this.languageColumnList = data.rows
            }
          })
          this.languageColumnList = this.columnList
          searchLanguageListByLanguageCode(this.querySysLanguagePack).then(({data}) => {
            this.languageDataList = data.rows
          })
        } else {
          this.$message("请选中一种语言")
        }
      },
      // 获取多语言列表
      getLanguageList() {
        searchSysLanguage(this.queryLanguage).then(({data}) => {
          this.languageList = data.rows
        })
      },
      // 获取button的词典
      getFunctionButtonList() {
        searchFunctionButtonList(this.queryButton).then(({data}) => {
          if (data.code == 0 ) {
            this.buttons = data.data
          } else {
            // saveButtonList(this.buttonList).then(({data}) => {
            // })
          }
        })
      },
      // 获取语言词典
      getSysLanguageParamList() {
        searchSysLanguageParam(this.querySysLanguageParam).then(({data}) => {
          this.sysLanguageParams = data.rows
        })
      },
      // 打开页面设置
      userSetting() {
        this.visible = true;
        let queryTable = {
          userId: this.$store.state.user.name,
          functionId: this.$route.meta.menuId,
          tableId: this.$route.meta.menuId + 'WAHO01',
          languageCode: this.$i18n.locale
        }
        this.$nextTick(() => {
          this.$refs.column.init(queryTable);
        });
      },
      // 获取 用户保存的 格式列
      getTableUserColumn() {
        getTableUserListLanguage(this.queryTableUser).then(({data}) => {
          if (data.rows.length > 0) {
            //this.columnList = []
            this.columnList = data.rows
          } else {
            this.getColumnList()
          }

        })
      },
      // 保存 默认配置 列
      async saveColumnList() {
        // 删除所有的该页面下保存的数据
        if (this.userColumnList) {
          //删除 user自定义的数据
          await removerUser(this.queryTable)
        }
        // 删除默认配置
        await removerDefault(this.queryTable)
        // 保存页面 table属性
        let sumColumnList = this.columnList.concat(this.columnList1);
        sumColumnList = sumColumnList.map(item=> {
          return item = {
            tableId: item.tableId,
            tableName: item.tableName,
            columnProp: item.columnProp,
            columnLabel: item.columnLabel,
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            columnWidth: null,
            format: null,
            functionId: this.$route.meta.menuId,
            sortLv: 0,
            status: true,
            fixed: '',
            serialNumber: null,
            columnType: null,
            align: null
          }
        })

        await  saveTableDefaultList(sumColumnList)
        // 保存页面 button label title 属性
        let buttons = this.buttonList.map( item => {
          return item = {
            functionId: this.$route.meta.menuId,
            languageValue: item.languageValue,
            objectId: item.objectId,
            objectType: item.objectType,
            tableId: item.tableId
          }
        })
        await saveButtonList(buttons)
        this.getFunctionButtonList()
        this.getColumnList()
      },
      // 获取 tableDefault 列
      getColumnList() {
        getTableDefaultListLanguage(this.queryTable).then(({data}) => {
          if (!data.rows.length == 0) {
            // this.showDefault = false
            this.columnList = data.rows
          } else {
           // this.showDefault = true
          }
        })
      },
      // 获取数据列表
      getDataList() {
        this.dataListLoading = true
        getWarehouseList(this.queryHeaderData).then(({data}) => {
          if (data && data.code === 0) {
            this.dataList = data.rows
            // this.totalPage = data.page.totalCount
          } else {
            this.dataList = []
            // this.totalPage = 0
          }
          this.dataListLoading = false
        })
      },
      // 每页数
      sizeChangeHandle(val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle(val) {
        this.pageIndex = val
        this.getDataList()
      },
      // 多选
      selectionChangeHandle(val) {
        this.dataListSelections = val
      },
      // 删除
      deleteHandle(id) {
        var ids = id ? [id] : this.dataListSelections.map(item => {
          return item.id
        })
        this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl('//prd/delete'),
            method: 'post',
            data: this.$http.adornData(ids, false)
          }).then(({data}) => {
            if (data && data.code === 0) {
               this.$message.success('操作成功')
              this.getDataList()

            } else {
              this.$message.error(data.msg)
            }
          })
        })
      },
      // 导出
      fields(){
        let  json = "{"
        this.columnList.forEach((item,index) =>{
          if (index ==  this.columnList.length-1 ){
            json +="\""+item.columnLabel+"\"" +":"+"\""+item.columnProp+"\""
          }else {
            json += "\""+item.columnLabel+"\"" +":"+"\""+item.columnProp+"\""+ ","
          }
        })
        json +="}"
        let s = eval("(" + json + ")")
        return s
      },
      createExportData() {
        // 点击导出按钮之后,开始导出数据之前的执行函数,返回值为需要下载的数据
        // TODO:构造需要下载的数据返回
        if(this.dataListSelections.length>0){
          return this.dataListSelections;
        }
        return this.dataList;
      },
      startDownload() {
        this._exportLoading = this.$loading({
          lock: true,
          text: '正在导出数据，请稍候...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
      },
      finishDownload() {
        if (this._exportLoading) {
          this._exportLoading.close()
          this._exportLoading = null
        }
      },
      // ==================== 仓储策略配置 ====================
      // 打开仓储策略配置对话框
      async openStorageConfigDialog(row) {
        this.currentWarehouse = row;
        this.configQuery = {
          configCode: '',
          configName: ''
        };
        this.storageConfigDialogVisible = true;

        // 加载可选策略列表和已配置策略列表
        await this.loadStorageConfigLists();
      },

      // 加载仓储策略列表
      async loadStorageConfigLists() {
        try {
          // 加载可选策略（从StorageZoneConfig表）
          const {data: availableData} = await getStorageZoneConfigList({
            site: this.currentWarehouse.site
          });

          // 加载已配置策略（从WareHouseStorageZoneConfig表）
          const {data: selectedData} = await getWarehouseStorageConfigList({
            site: this.currentWarehouse.site,
            warehouseId: this.currentWarehouse.wareHouseId
          });

          if (selectedData && selectedData.code === 0) {
            this.selectedConfigList = selectedData.list || [];
          }

          // 过滤掉已配置的策略
          if (availableData && availableData.code === 0) {
            const selectedCodes = this.selectedConfigList.map(item => item.configCode);
            this.availableConfigListAll = (availableData.list || []).filter(item =>
              !selectedCodes.includes(item.configCode)
            );
            this.availableConfigList = this.availableConfigListAll;
          }
        } catch (error) {
          this.$message.error('加载仓储策略列表失败');
          console.error(error);
        }
      },

      // 查询可选策略
      searchAvailableConfigs() {
        const configCode = this.configQuery.configCode.trim().toLowerCase();
        const configName = this.configQuery.configName.trim().toLowerCase();

        if (!configCode && !configName) {
          this.availableConfigList = this.availableConfigListAll;
          return;
        }

        this.availableConfigList = this.availableConfigListAll.filter(item => {
          const matchCode = !configCode || (item.configCode && item.configCode.toLowerCase().includes(configCode));
          const matchName = !configName || (item.configName && item.configName.toLowerCase().includes(configName));
          return matchCode && matchName;
        });
      },

      // 重置策略查询
      resetConfigQuery() {
        this.configQuery = {
          configCode: '',
          configName: ''
        };
        this.availableConfigList = this.availableConfigListAll;
      },

      // 可选策略表格行点击
      availableConfigClickRow(row) {
        this.$refs.availableConfigTable.toggleRowSelection(row);
      },

      // 可选策略选择变化
      availableConfigSelectionChange(val) {
        this.availableConfigSelections = val;
      },

      // 已配置策略表格行点击
      selectedConfigClickRow(row) {
        this.$refs.selectedConfigTable.toggleRowSelection(row);
      },

      // 已配置策略选择变化
      selectedConfigSelectionChange(val) {
        this.selectedConfigSelections = val;
      },

      // 添加仓储策略
      async addStorageConfig() {
        if (!this.availableConfigSelections || this.availableConfigSelections.length === 0) {
          this.$message.warning('请选择要添加的策略');
          return;
        }

        try {
          const configList = this.availableConfigSelections.map(item => ({
            site: this.currentWarehouse.site,
            buNo: this.currentWarehouse.buNo,
            warehouseId: this.currentWarehouse.wareHouseId,
            configCode: item.configCode,
            active: 'Y',
            remark: item.configName + (item.description ? ' - ' + item.description : '')
          }));

          const {data} = await saveWarehouseStorageConfig(configList);

          if (data && data.code === 0) {
            this.$message.success('添加成功');
            // 清空选择
            this.availableConfigSelections = [];
            // 重新加载列表（会自动过滤）
            await this.loadStorageConfigLists();
            // 如果有查询条件，重新应用查询
            if (this.configQuery.configCode || this.configQuery.configName) {
              this.searchAvailableConfigs();
            }
          } else {
            this.$message.error(data.msg || '添加失败');
          }
        } catch (error) {
          this.$message.error('添加失败');
          console.error(error);
        }
      },

      // 移除仓储策略
      async removeStorageConfig() {
        if (!this.selectedConfigSelections || this.selectedConfigSelections.length === 0) {
          this.$message.warning('请选择要移除的策略');
          return;
        }

        this.$confirm('确定要移除选中的策略吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          try {
            const configCodes = this.selectedConfigSelections.map(item => item.configCode);

            const {data} = await deleteWarehouseStorageConfig({
              site: this.currentWarehouse.site,
              warehouseId: this.currentWarehouse.wareHouseId,
              configCodes: configCodes
            });

            if (data && data.code === 0) {
              this.$message.success('移除成功');
              // 清空选择
              this.selectedConfigSelections = [];
              // 重新加载列表（会自动过滤）
              await this.loadStorageConfigLists();
              // 如果有查询条件，重新应用查询
              if (this.configQuery.configCode || this.configQuery.configName) {
                this.searchAvailableConfigs();
              }
            } else {
              this.$message.error(data.msg || '移除失败');
            }
          } catch (error) {
            this.$message.error('移除失败');
            console.error(error);
          }
        }).catch(() => {});
      },

      // ==================== 权限授权 ====================
      // 打开权限授权对话框
      async openAccessAuthDialog(row) {
        this.currentWarehouse = row;
        this.userQuery = {
          username: '',
          userDisplay: ''
        };
        this.accessAuthDialogVisible = true;

        // 加载用户列表
        await this.loadAccessAuthLists();
      },

      // 加载权限授权列表
      async loadAccessAuthLists() {
        try {
          // 并行加载可选用户和已授权用户
          const [{ data: availableData }, { data: selectedData }] = await Promise.all([
            getUserList({ site: this.currentWarehouse.site }),
            getAccessWarehouseList({
              site: this.currentWarehouse.site,
              warehouseId: this.currentWarehouse.wareHouseId
            })
          ]);

          if (selectedData && selectedData.code === 0) {
            this.selectedUserList = selectedData.list || [];
          }

          // 过滤掉已授权的用户
          if (availableData && availableData.code === 0) {
            const selectedUserIds = this.selectedUserList.map(item => item.userid);
            this.availableUserListAll = (availableData.list || []).filter(item =>
              !selectedUserIds.includes(item.username)
            );
            this.availableUserList = this.availableUserListAll;
          }
        } catch (error) {
          this.$message.error('加载用户列表失败');
          console.error(error);
        }
      },

      // 查询可选用户
      searchAvailableUsers() {
        const username = this.userQuery.username.trim().toLowerCase();
        const userDisplay = this.userQuery.userDisplay.trim().toLowerCase();

        if (!username && !userDisplay) {
          this.availableUserList = this.availableUserListAll;
          return;
        }

        this.availableUserList = this.availableUserListAll.filter(item => {
          const matchUsername = !username || (item.username && item.username.toLowerCase().includes(username));
          const matchDisplay = !userDisplay || (item.userDisplay && item.userDisplay.toLowerCase().includes(userDisplay));
          return matchUsername && matchDisplay;
        });
      },

      // 重置用户查询
      resetUserQuery() {
        this.userQuery = {
          username: '',
          userDisplay: ''
        };
        this.availableUserList = this.availableUserListAll;
      },

      // 可选用户表格行点击
      availableUserClickRow(row) {
        this.$refs.availableUserTable.toggleRowSelection(row);
      },

      // 可选用户选择变化
      availableUserSelectionChange(val) {
        this.availableUserSelections = val;
      },

      // 已授权用户表格行点击
      selectedUserClickRow(row) {
        this.$refs.selectedUserTable.toggleRowSelection(row);
      },

      // 已授权用户选择变化
      selectedUserSelectionChange(val) {
        this.selectedUserSelections = val;
      },

      // 添加权限授权
      async addAccessAuth() {
        if (!this.availableUserSelections || this.availableUserSelections.length === 0) {
          this.$message.warning('请选择要授权的用户');
          return;
        }

        try {
          const userList = this.availableUserSelections.map(item => ({
            site: this.currentWarehouse.site,
            buNo: this.currentWarehouse.buNo,
            warehouseId: this.currentWarehouse.wareHouseId,
            userid: item.username,
            userName: item.userDisplay
          }));

          const {data} = await saveAccessWarehouse(userList);

          if (data && data.code === 0) {
            this.$message.success('授权成功');
            // 清空选择
            this.availableUserSelections = [];
            // 重新加载列表（会自动过滤）
            await this.loadAccessAuthLists();
            // 如果有查询条件，重新应用查询
            if (this.userQuery.username || this.userQuery.userDisplay) {
              this.searchAvailableUsers();
            }
          } else {
            this.$message.error(data.msg || '授权失败');
          }
        } catch (error) {
          this.$message.error('授权失败');
          console.error(error);
        }
      },

      // 移除权限授权
      async removeAccessAuth() {
        if (!this.selectedUserSelections || this.selectedUserSelections.length === 0) {
          this.$message.warning('请选择要移除的用户');
          return;
        }

        this.$confirm('确定要移除选中用户的授权吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          try {
            const userIds = this.selectedUserSelections.map(item => item.userid);

            const {data} = await deleteAccessWarehouse({
              site: this.currentWarehouse.site,
              warehouseId: this.currentWarehouse.wareHouseId,
              userIds: userIds
            });

            if (data && data.code === 0) {
              this.$message.success('移除成功');
              // 清空选择
              this.selectedUserSelections = [];
              // 重新加载列表（会自动过滤）
              await this.loadAccessAuthLists();
              // 如果有查询条件，重新应用查询
              if (this.userQuery.username || this.userQuery.userDisplay) {
                this.searchAvailableUsers();
              }
            } else {
              this.$message.error(data.msg || '移除失败');
            }
          } catch (error) {
            this.$message.error('移除失败');
            console.error(error);
          }
        }).catch(() => {});
      }
    },
    created() {
      // this.getTableUserColumn()
      // this.getSysLanguageParamList()
      // this.getFunctionButtonList()
      // this.favoriteIsOk()
    }
  }
</script>
<style scoped lang="scss">
.wrapper {
  height: calc(100% - 40px);
}
  .sl-input {
    background-color: transparent;
    border: 0 !important;
    font-size: 12px !important;
    height: 12px !important;
    line-height: 14px !important;
    background-color: transparent !important;
    width: 140px;
  }

  .sl-input:focus, textarea:focus {

    outline: none;

  }
  .sl-svg{
    overflow: hidden;
    float: right;
  }

/* ==================== 配置对话框样式 ==================== */
/deep/ .config-dialog {
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

/deep/ .config-dialog .el-dialog__header {
  background: linear-gradient(135deg, #9ac3d0 20%, #b6c7dd 80%);
  padding: 20px 24px;
  border-radius: 8px 8px 0 0;
}

/deep/ .config-dialog .el-dialog__title {
  color: #ffffff;
  font-size: 18px;
  font-weight: 600;
}

/deep/ .config-dialog .el-dialog__headerbtn .el-dialog__close {
  color: #ffffff;
  font-size: 20px;
  font-weight: bold;
}

/deep/ .config-dialog .el-dialog__headerbtn .el-dialog__close:hover {
  color: #f0f0f0;
}

/deep/ .config-dialog .el-dialog__body {
  padding: 0;
  background: #f5f7fa;
}

/* 查询区域 */
.search-section {
  padding: 16px 24px;
  background: #ffffff;
  border-bottom: 1px solid #e8e8e8;

  .el-form {
    margin-bottom: 0;
  }

  .el-form-item {
    margin-bottom: 0;
  }
}

/* 项目操作容器 */
.item-operation-content {
  display: flex;
  gap: 16px;
  align-items: stretch;
  padding: 0px;
}

/* 面板样式 */
.item-panel {
  flex: 1;
  background: #ffffff;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  transition: all 0.3s ease;
}

.item-panel:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.available-panel {
  flex: 1.5;
}

.selected-panel {
  flex: 1;
}

.auth-panel {
  flex: 1;
}

/* 面板头部 */
.panel-header {
  padding: 8px 16px;
  background: linear-gradient(135deg, #9ac3d0 20%, #b6c7dd 80%);
  border-bottom: 2px solid #9ac3d0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.panel-header i {
  font-size: 18px;
  color: #ffffff;
}

.panel-title {
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
  flex: 1;
}

.item-count {
  font-size: 13px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.2);
  padding: 2px 10px;
  border-radius: 12px;
  font-weight: 500;
}

/* 表格样式 */
.operation-table {
  border: none;
}

/deep/ .operation-table .el-table__body-wrapper {
  max-height: 420px;
  overflow-y: auto;
}

/deep/ .operation-table .el-table__row {
  cursor: pointer;
  transition: background-color 0.2s ease;
}

/deep/ .operation-table .el-table__row:hover {
  background-color: #f0f9ff !important;
}

/deep/ .operation-table .current-row > td {
  background-color: #e6f7ff !important;
}

/* 操作按钮 */
.operation-buttons {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding: 0 8px;
}

.operation-buttons .el-button {
  width: 48px;
  height: 48px;
  font-size: 20px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.operation-buttons .el-button:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.operation-buttons .el-button.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.operation-buttons .el-button--primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
}

.operation-buttons .el-button--danger {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  border: none;
}

/* 底部按钮 */
.dialog-footer {
  text-align: center;
  padding: 16px 0 0;
}

.dialog-footer .el-button {
  min-width: 100px;
  font-weight: 500;
}

/* 响应式优化 */
@media (max-width: 1300px) {
  .item-operation-content {
    gap: 12px;
  }

  .operation-buttons .el-button {
    width: 42px;
    height: 42px;
    font-size: 18px;
  }
}

</style>