CostumingPlatform/ant-design-vue-jeecg/src/views/zystylemodel/ZyStyleModelList.vue

<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->


    <!-- table区域-begin -->
    <div>
      <j-vxe-table
        toolbar
        :toolbarConfig="toolbarConfig"
        row-number
        row-selection
        keep-source
        async-remove

        :height="340"
        :loading="loading"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="pagination"
        style="margin-top: 8px;"
        @pageChange="handlePageChange"
      >
        <template v-slot:action="props">
          <a @click="submitForm(props)">保存</a>
          <a-divider type="vertical"/>
          <a-popconfirm title="确定删除吗？" @confirm="handleDelete(props.rowId)">
            <a>删除</a>
          </a-popconfirm>
        </template>
      </j-vxe-table>
    </div>

    <zy-style-model-modal ref="modalForm" @ok="modalFormOk"></zy-style-model-modal>
  </a-card>
</template>

<script>

  import '@/assets/less/TableExpand.less'
  import { JVXETypes } from '@/components/jeecg/JVxeTable'
  import { mixinDevice } from '@/utils/mixin'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import ZyStyleModelModal from './modules/ZyStyleModelModal'
  import {deleteAction, getAction, postAction, putAction, postFormAction, httpAction} from "@api/manage";
  import store from "@/store";
  import {filterObj, validateDuplicateValue} from '@/utils/util'

  export default {
    name: 'ZyStyleModelList',
    mixins:[JeecgListMixin, mixinDevice],
    components: {
      ZyStyleModelModal
    },
    data () {
      return {
        description: 'zy_style_model管理页面',
        // 表头
        // 工具栏的按钮配置
        toolbarConfig: {
          // add 新增按钮；remove 删除按钮；clearSelection 清空选择按钮
          btn: ['add']
        },
        validatorRules: {
          styleId: [
            { required: true, message: '请选择服装类型!'},
          ],
        },
        // 是否正在加载
        loading: false,
        // 分页器参数
        pagination: {
          // 当前页码
          current: 1,
          // 每页的条数
          pageSize: 10,
          // 可切换的条数
          pageSizeOptions: ['10', '20', '30', '100', '200'],
          // 数据总数（目前并不知道真实的总数，所以先填写0，在后台查出来后再赋值）
          total: 0,
          showQuickJumper: true,
          showSizeChanger: true,
           id:null
        },

        // 数据源，控制表格的数据

        columns: [
          {
            title: '款式',
            width: '150px',
            fixed: 'left',
            key: 'styleId',
            type: JVXETypes.select,
            placeholder: '请输入${title}',
            dictCode: 'zy_cloths_style,style_names,id',
            validateRules: [{required: true, message: '${title}不能为空'}]
          },
          {
            title:'是否默认尺码',
            align:"center",
            width: '150px',
            key: 'isdefault',
            type: JVXETypes.select,
            dictCode: 'isdefault',
            defaultValue : 0,
          },
          {key: 'modelNumber', title: '型号编码', dictCode: 'modenumber',width: '120px', type: JVXETypes.select},
          {key: 'size', title: '码数', width: '100px',dictCode: 'size', type: JVXETypes.select},
          {key: 'anumbers', title: '型', width: '100px',dictCode: 'xsize', type: JVXETypes.select},
          {key: 'bnumbers', title: '号', width: '100px',dictCode: 'hsize', type: JVXETypes.select},
          {key: 'collarLarge', title: '领大', width: '80px', type: JVXETypes.input},
          {key: 'bust', title: '胸围', width: '80px', type: JVXETypes.input},
          {key: 'sleeveLength', title: '袖长', width: '80px', type: JVXETypes.input},
          {key: 'shslLength', title: '连肩袖长', width: '100px', type: JVXETypes.input},

          {key: 'tsWidth', title: '总肩宽', width: '80px', type: JVXETypes.input},
          {key: 'cuff', title: '袖口', width: '80px', type: JVXETypes.input},
          {key: 'waistline', title: '腰围', width: '80px', type: JVXETypes.input},
          {key: 'hem', title: '下摆', width: '80px', type: JVXETypes.input},

          {
            title: '操作',
            key: 'action',
            type: JVXETypes.slot,
            fixed: 'right',
            minWidth: '100px',
            align: 'center',
            slotName: 'action',
          }
        ],
        url: {
          list: "/zystylemodel/zyStyleModel/list",
          delete: "/zystylemodel/zyStyleModel/delete",
          add: "/zystylemodel/zyStyleModel/add",
          edit: "/zystylemodel/zyStyleModel/edit",
          deleteBatch: "/zystylemodel/zyStyleModel/deleteBatch",
          exportXlsUrl: "/zystylemodel/zyStyleModel/exportXls",
          importExcelUrl: "zystylemodel/zyStyleModel/importExcel",
        },
        //参数
        loadRouteType:false,
        id:null,
        rowId:'',
        dictOptions:{},
        superFieldList:[],
      }
    },
    created() {
      //this.loadData();
      this.loadParameter() ;
      //备份model原始值
      //this.modelDefault = JSON.parse(JSON.stringify(this.model));
    },
    computed: {
      importExcelUrl: function(){
        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
      },
    },
    methods: {
      handleDelete: function (id) {
        if(!this.url.delete){
          this.$message.error("请设置url.delete属性!")
          return
        }
        var that = this;
        deleteAction(that.url.delete, {id: id}).then((res) => {
          if (res.success) {
            //重新计算分页问题
            that.reCalculatePage(1)
            that.$message.success(res.message);
            that.loadData();
          } else {
            that.$message.warning(res.message);
          }
        });
      },
      submitForm (props) {
              this.model = Object.assign({}, props);
              var str = props.rowId;
              let httpurl = '';
              let method = '';
              if (str.search("row") != -1) {
                httpurl += this.url.add;
                method = 'post';
              } else {
                httpurl += this.url.edit;
                method = 'put';
              }
              httpAction(httpurl, props.row, method).then((res) => {
                if (res.success) {
                  this.$message.success(res.message);
                  this.$emit('ok');
                } else {
                  this.$message.warning(res.message);
                }
              })
      },
//加载传递参数
      loadParameter() {
        if (this.loadRouteType == false) {
          this.id = this.$route.query.id;
          this.loadRouteType = true;
        }
      },
// 加载数据
      loadData(arg) {
        //加载数据 若传入参数1则加载第一页的内容
        if (arg === 1) {
          this.pagination.current = 1;
        }
        // 调用查询数据接口
        this.loadParameter();
        var params = this.getQueryParams();//查询条件
        this.loading = true;
        getAction(this.url.list, params).then(res => {
          if (res.success) {
            /*// 后台查询回来的 total，数据总数量
            this.pagination.total = res.result.total*/
            // 将查询的数据赋值给 dataSource
            this.dataSource = res.result.records||res.result;
            console.log(this.dataSource,'abc')
            if(res.result.total)
            {
              this.pagination.total = res.result.total;
            }else{
              this.pagination.total = 0;
            }
            //this.dataSource = res.result.records

          } else {
            this.$error({title: '主表查询失败', content: res.message})
          }
        }).finally(() => {
          // 这里是无论成功或失败都会执行的方法，在这里关闭loading
          this.loading = false
        })
      },
      // 当分页参数变化时触发的事件
      handlePageChange(event) {
        // 重新赋值
        this.pagination.current = event.current
        this.pagination.pageSize = event.pageSize
        // 查询数据
        this.loadData()
      },
      initDictConfig(){
      },
      getQueryParams() {
        //获取查询条件
        let sqp = {}
        if(this.superQueryParams){
          sqp['superQueryParams']=encodeURI(this.superQueryParams)
          sqp['superQueryMatchType'] = this.superQueryMatchType
        }
        var param = Object.assign(sqp, this.queryParam, this.isorter ,this.filters);
        param.field = this.getQueryField();
        param.pageNo = this.ipagination.current;
        param.pageSize = this.ipagination.pageSize;
        param.styleId=this.id
        return filterObj(param);
      },
      getSuperFieldList(){
        let fieldList=[];
        fieldList.push({type:'string',value:'styleId',text:'款式id',dictCode:''})
        fieldList.push({type:'int',value:'isdefault',text:'是否默认尺码',dictCode:''})
        fieldList.push({type:'int',value:'modelNumber',text:'型号编码',dictCode:''})
        fieldList.push({type:'int',value:'size',text:'码数',dictCode:''})
        fieldList.push({type:'string',value:'anumbers',text:'型',dictCode:''})
        fieldList.push({type:'string',value:'bnumbers',text:'号',dictCode:''})
        fieldList.push({type:'double',value:'collarLarge',text:'领大',dictCode:''})
        fieldList.push({type:'double',value:'bust',text:'胸围',dictCode:''})
        fieldList.push({type:'double',value:'sleeveLength',text:'袖长',dictCode:''})
        fieldList.push({type:'double',value:'shslLength',text:'连肩袖长',dictCode:''})
        fieldList.push({type:'double',value:'tsWidth',text:'总肩宽',dictCode:''})
        fieldList.push({type:'double',value:'cuff',text:'袖口',dictCode:''})
        fieldList.push({type:'double',value:'waistline',text:'腰围',dictCode:''})
        fieldList.push({type:'double',value:'hem',text:'下摆',dictCode:''})
        this.superFieldList = fieldList
      }
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less';
</style>