rongxing-vue/src/views/modules/labelSetting/customer_label_setting.vue

<template>
  <div class="customer-css">
   <!--  查询时间和产品  -->
    <el-form :inline="true" label-position="top" label-width="100px" style="margin-top: 5px;">
      <el-form-item :label=labels.customerId>
        <el-input v-model="pageData.customerId" style="width: 120px"></el-input>
      </el-form-item>
      <el-form-item :label=labels.labelNo>
        <el-input v-model="pageData.labelNo" style="width: 120px"></el-input>
      </el-form-item>
      <el-form-item :label=labels.labelType>
        <el-input v-model="pageData.labelType" style="width: 120px"></el-input>
      </el-form-item>
      <el-form-item :label=labels.labelName>
        <el-input v-model="pageData.labelName" style="width: 120px" ></el-input>
      </el-form-item>
      <el-form-item style="margin-top: 16px;">
        <el-button type="primary" @click="refreshPageTables()" class="customer-bun-mid"
                   style="margin-left: 10px;  margin-bottom: 5px;">{{ buttons.searchButton }}
        </el-button>
      </el-form-item>
      <el-form-item style="margin-top: 16px;">
        <el-button type="primary" :disabled="authAdd" @click="addLabelSettingModal()" class="customer-bun-mid"
                   style="margin-left: 10px;  margin-bottom: 5px;">{{ buttons.addButton }}
        </el-button>
      </el-form-item>
    </el-form>
      <!--  标签列表数据  -->
    <el-main style="margin-left: -20px; margin-top: -20px; width: 104%;">
      <el-table @row-click="setCurrentRow"
                :height="height"
                highlight-current-row
                :data="labelArrays"
                border
                v-loading="dataListLoading"
                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"
          :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="left"
          header-align="center"
          align="center"
          width="100"
          :label=labels.operationLabel>
          <template slot-scope="scope">
            <a class="customer-a" v-if="!authEdit" @click="editLabelSettingModal(scope.row)">{{ labels.editLabel }}</a>
            <a class="customer-a" v-if="!authDelete" @click="deleteLabelSettingConfirm(scope.row)">{{ labels.deleteLabel }}</a>
          </template>
        </el-table-column>
      </el-table>
    </el-main>

    <!-- 动态列    -->
    <column v-if="showDefault" ref="column" @refreshData="getTableUserColumn" v-drag></column>
    <!-- 新增或者修改的modal   -->
    <comAddUpdateLabel  ref="comAddUpdateLabel" @refreshPageTables="refreshPageTables" v-drag></comAddUpdateLabel>
  </div>
</template>

<script>

import {
  getLabelSettingList,
  deleteLabelSetting,
} from '@/api/labelSetting/customer_label_setting.js';

/*引入組件*/
import comAddUpdateLabel from "./com_add_update_customer_label";/*新增或者修改的組件*/

/* 动态表头 */
import {
  saveTableDefaultList,
  getTableDefaultListLanguage,
  getTableUserListLanguage,
  removerDefault,
  removerUser
} from '@/api/table.js'

import {
  searchSysLanguagePackList,
  searchSysLanguageParam,
  searchFunctionButtonList,
  saveButtonList,
  searchSysLanguage,
  searchLanguageListByLanguageCode,
  saveSysLanguageOne,
  searchPageLanguageData,
  removerLanguage,
  saveSysLanguageList
} from "@/api/sysLanguage.js";

var functionId = '100008003';

export default {
  data() {
    return {
      height: 800,
      authEdit: false,
      authAdd: false,
      authDelete: false,
      menuId: this.$route.meta.menuId,
      menuShow: false,
      showDefault: false,
      pageData: {
        site: this.$store.state.user.site,
        username: this.$store.state.user.name,
        customerId: '',
        labelNo: '',
        labelName: '',
        labelType: '',
        searchFlag: 'Y'
      },
      currentRow: {},
      labelArrays: [],
      dataListLoading: false,
      columnList: [
        {
          userId: this.$store.state.user.name,
          functionId: 100008003,
          serialNumber: '100008003LabelLabelType',
          tableId: '100008003Label',
          tableName: '客户标签自定义列表',
          columnProp: 'labelType',
          headerAlign: 'center',
          align: 'center',
          columnLabel: '标签类型',
          columnWidth: 100,
          columnHidden: false,
          columnImage: false,
          columnSortable: true,
          sortLv: 0,
          status: true,
          fixed: ''
        }, {
          userId: this.$store.state.user.name,
          functionId: 100008003,
          serialNumber: '100008003LabelCustomerId',
          tableId: '100008003Label',
          tableName: '客户标签自定义列表',
          columnProp: 'customerId',
          headerAlign: 'center',
          align: 'center',
          columnLabel: '客户编码',
          columnWidth: 100,
          columnHidden: false,
          columnImage: false,
          columnSortable: true,
          sortLv: 0,
          status: true,
          fixed: ''
        }, {
          userId: this.$store.state.user.name,
          functionId: 100008003,
          serialNumber: '100008003LabelCustomerDesc',
          tableId: '100008003Label',
          tableName: '客户标签自定义列表',
          columnProp: 'customerDesc',
          headerAlign: 'center',
          align: 'center',
          columnLabel: '客户名称',
          columnWidth: 100,
          columnHidden: false,
          columnImage: false,
          columnSortable: true,
          sortLv: 0,
          status: true,
          fixed: ''
        }, {
          userId: this.$store.state.user.name,
          functionId: 100008003,
          serialNumber: '100008003LabelLabelNo',
          tableId: '100008003Label',
          tableName: '客户标签自定义列表',
          columnProp: 'labelNo',
          headerAlign: 'center',
          align: 'center',
          columnLabel: '标签编号',
          columnWidth: 160,
          columnHidden: false,
          columnImage: false,
          columnSortable: true,
          sortLv: 0,
          status: true,
          fixed: ''
        }, {
          userId: this.$store.state.user.name,
          functionId: 100008003,
          serialNumber: '100008003LabelLabelName',
          tableId: '100008003Label',
          tableName: '客户标签自定义列表',
          columnProp: 'labelName',
          headerAlign: 'center',
          align: 'center',
          columnLabel: '报表文件名',
          columnWidth: 220,
          columnHidden: false,
          columnImage: false,
          columnSortable: true,
          sortLv: 0,
          status: true,
          fixed: ''
        }, {
          userId: this.$store.state.user.name,
          functionId: 100008003,
          serialNumber: '100008003LabelLabelClass',
          tableId: '100008003Label',
          tableName: '客户标签自定义列表',
          columnProp: 'labelClass',
          headerAlign: 'center',
          align: 'left',
          columnLabel: '标签种类',
          columnWidth: 140,
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: ''
        }, {
          userId: this.$store.state.user.name,
          functionId: 100008003,
          serialNumber: '100008003LabelSite',
          tableId: '100008003Label',
          tableName: '客户标签自定义列表',
          columnProp: 'site',
          headerAlign: 'center',
          align: 'left',
          columnLabel: '工厂编号',
          columnWidth: 60,
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: ''
        }, {
          userId: this.$store.state.user.name,
          functionId: 100008003,
          serialNumber: '100008003LabelSubLabelFlag',
          tableId: '100008003Label',
          tableName: '客户标签自定义列表',
          columnProp: 'subLabelFlag',
          headerAlign: 'center',
          align: 'left',
          columnLabel: '子报表',
          columnWidth: 60,
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: ''
        }, {
          userId: this.$store.state.user.name,
          functionId: 100008003,
          serialNumber: '100008003LabelParentLabelNo',
          tableId: '100008003Label',
          tableName: '客户标签自定义列表',
          columnProp: 'parentLabelNo',
          headerAlign: 'center',
          align: 'left',
          columnLabel: '上级标签编号',
          columnWidth: 120,
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: ''
        }, {
          userId: this.$store.state.user.name,
          functionId: 100008003,
          serialNumber: '100008003LabelRemark',
          tableId: '100008003Label',
          tableName: '客户标签自定义列表',
          columnProp: 'remark',
          headerAlign: 'center',
          align: 'left',
          columnLabel: '备注',
          columnWidth: 240,
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: ''
        },
       ],
      queryTable: {
        userId: this.$store.state.user.name,
        functionId: this.$route.meta.menuId,
        tableId: '100008003Label',
        languageCode: this.$i18n.locale
      },
      // 用户table 查询参数
      queryTableUser: {
        userId: this.$store.state.user.name,
        functionId: this.$route.meta.menuId,
        tableId: '100008003Label',
        status: true,
        languageCode: this.$i18n.locale
      },
      // 用户table 配置集合
      userColumnList: [],
      buttons: {
        searchButton: '查询',
        addButton: '新增',
       },
      queryButton: {
        functionId: functionId,
        table_id: '*',
        languageCode: this.$i18n.locale,
        objectType: 'button'
      },
      labels: {
        customerId: '客户编码',
        labelNo: '标签编号:',
        labelType: '标签类型:',
        labelName: '报表文件名:',
        operationLabel: '操作',
        editLabel: '编辑',
        deleteLabel: '删除',
        sureDeleteThisRecord: '确定要删除该记录吗?',
        tipsLabel: '提示',
        confirmLabel: '确定',
        cancelLabel: '取消',
      },
      queryLabel: {
        functionId: functionId,
        table_id: '*',
        languageCode: this.$i18n.locale,
        objectType: 'label'
      },
    }
  },

  components: {
    comAddUpdateLabel,/*标签新增或者修改的组件*/
  },

  mounted() {
    this.$nextTick(() => {
      this.height = window.innerHeight - 165;
    })
  },
  methods: {
    /* 刷新页面table */
    refreshPageTables() {
      this.currentRow = {};
      //重置是否查询
      this.pageData.searchFlag = 'Y';
      this.refreshLabelSettingList();
    },

    // 获取当前列表的信息
    refreshLabelSettingList() {
      // 查询当前页面的参数
      getLabelSettingList(this.pageData).then(({data}) => {
        // 设置查询数据
        this.labelArrays = data.rows;
      })
    },


    /*新增标签定义的modal*/
    addLabelSettingModal(){
     let currentData = {
        site: this.$store.state.user.site,
         username: this.$store.state.user.name,
         labelNo: '',
         labelName: '',
         labelType: '',
         labelClass: '',
         subLabelFlag: 'N',
         parentLabelNo: '*',
         customerId: '',
         remark: '',
         addFlag: 'Y'
      };
      //打开组件 去做新增业务
      this.$nextTick(() => {
        this.$refs.comAddUpdateLabel.init(currentData);
      })
    },

    /*修改标签定义的modal*/
    editLabelSettingModal(row){
      let currentData = row;
      currentData.addFlag = 'N';
      //打开组件 去做修改业务
      this.$nextTick(() => {
        this.$refs.comAddUpdateLabel.init(currentData);
      })
    },

    /*删除标签*/
    deleteLabelSettingConfirm(row){
      this.$confirm(this.labels.sureDeleteThisRecord, this.labels.tipsLabel, {
        confirmButtonText: this.labels.confirmLabel,
        cancelButtonText: this.labels.cancelLabel,
        type: 'warning'
      }).then(() => {
        deleteLabelSetting(row).then(({data}) => {
          if (data && data.code == 200) {
            this.refreshPageTables();
            this.$message.success(data.msg);
          } else {
            this.$message.error(data.msg);
          }
        });
      });
    },


    /* 设置选中行的参数 */
    setCurrentRow(row, column, event) {
      this.currentRow = JSON.parse(JSON.stringify(row))
    },

    // 打开页面设置
    userSetting() {
      this.visible = true
      let queryTable = {
        userId: this.$store.state.user.name,
        functionId: this.$route.meta.menuId,
        tableId: '100008003Label',
        languageCode: this.$i18n.locale
      }
      this.$nextTick(() => {
        this.$refs.column.init(queryTable)
      })
    },
    // 获取 用户保存的 格式列
    getTableUserColumn() {
      getTableUserListLanguage(this.queryTableUser).then(({data}) => {
        if (data && data.code == 0 && data.rows.length > 0) {
          // this.columnList = []
          this.columnList = data.rows
        } else {
          this.getColumnList()
        }
      })
    },

    // 获取 tableDefault 列
    getColumnList() {
      getTableDefaultListLanguage(this.queryTable).then(({data}) => {
        if (data && data.code == 0 && data.rows.length > 0) {
          // this.showDefault = false
          this.columnList = data.rows
        } else {
          // this.showDefault = true
        }
      })
    },

    //获取按钮的权限数据
    getButtonAuthData(){
      let updateFlag = this.isAuth(this.menuId+":revise");
      let fullControFlag = this.isAuth(this.menuId+":fullContro");
      let deleteFlag = this.isAuth(this.menuId+":remove");
      //处理页面的权限数据
      this.authEdit = !updateFlag && !fullControFlag;
      this.authAdd = !fullControFlag;
      this.authDelete = !deleteFlag;
    },

    //获取多语言的信息
    getMultiLanguageList() {
      //首先查询当前按钮的多语言
      searchFunctionButtonList(this.queryButton).then(({data}) => {
        if (data && data.code == 0 ) {
          this.buttons = data.data
        } else {
          // saveButtonList(this.buttonList).then(({data}) => {
          // })
        }
      });
      //其次查询当前标签的多语言
      searchFunctionButtonList(this.queryLabel).then(({data}) => {
        if (data && data.code == 0 ) {
          this.labels = data.data
        } else {
          // saveButtonList(this.buttonList).then(({data}) => {
          // })
        }
      });
    },

  },
  created() {
    // 不查询
    this.refreshLabelSettingList();
    // 获取动态表头的信息
    this.getTableUserColumn()
    //获取按钮的权限
    this.getButtonAuthData();
    //刷新多语言的信息
    this.getMultiLanguageList();
  }

}
</script>

<style>
.el-textarea__inner {
  padding: 5px 5px;
}

</style>

<!--当前页面的标签样式-->
<style scoped lang="scss">

/*针对el-card*/
.customer-card .el-form-item__content {
  margin-top: -15px;
}

.customer-card .el-form-item {
  height: 22px;
}

.customer-border .el-form-item__content {
  margin-top: -30px;
}

/*全局年与日类型  宽度*/
div.el-time-width {
  width: 110px !important;
}

/* 全局时间右边框*/
.customer-css input.el-input__inner {
  height: 22px !important;
  padding-right: 0px !important;
}

/* 控制el-card标签的数据*/
div.customer-el-card {
  margin-left: 110px;
  margin-top: -15px;
  height: 20px;
  width: 60px;
}

/* 颜色控制 */
div.customer-el-card-pink {
  background: #FF00FF;
}

div.customer-el-card-orange {
  background: #FFD700;
}

div.customer-el-card-blue {
  background: #0000CD;
}

/*清掉样式*/
.el-radio + .el-radio {
  margin-left: 0px;
}

/*当前按钮的通用样式*/
.customer-css .customer-bun-mid {
  width: 65px;
  text-align: center;
}

/*当前按钮的通用样式*/
.customer-css .el-button--medium {
  padding: 5px 5px;
}

/*添加主菜单和明细菜单的样式*/
.customer-css .customer-dropdown .el-button--primary {
  padding: 2px;
  font-size: 12px;
}

.el-dropdown-menu--medium .el-dropdown-menu__item {
  line-height: 18px;
  padding: 0 17px;
  font-size: 12px;
}

hr {
  margin-top: 0px;
}


/*控制上下间距*/
</style>