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

<template>

  <a-card :bordered="false">
    <p style="font-size: 30px;color:#333;padding-left: 40%">{{biaoTi}}</p>
    <!-- 查询区域 -->
<!--    <div class="table-page-search-wrapper">-->
<!--      <a-form layout="inline" @keyup.enter.native="searchQuery">-->
<!--        <a-row :gutter="24">-->
<!--          <a-col>-->
            <!--            <a-button type="primary">{{biaoTi}}</a-button>-->
<!--          </a-col>-->
<!--        </a-row>-->
<!--      </a-form>-->
<!--    </div>-->
    <!-- 查询区域-END -->

<!--    <a-button type="primary" icon="rollback" @click="fanHui()">返回</a-button>-->
    <!-- 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"
        @valueChange="handleValueChange"
        @added="added"
      >
        <template v-slot:toolbarSuffix>
          <a-button type="primary" icon="rollback" @click="fanHui()">返回</a-button>
<!--          <a-tooltip placement="top" title="获取值，忽略表单验证" :autoAdjustOverflow="true">-->
<!--            <a-button @click="handleTableGet">获取值</a-button>-->
<!--          </a-tooltip>-->
<!--          <a-tooltip placement="top" title="模拟加载1000条数据" :autoAdjustOverflow="true">-->
<!--            <a-button @click="handleTableSet">设置值</a-button>-->
<!--          </a-tooltip>-->
        </template>

        <template v-slot:action="props">
<!--          <a @click="submitForm(props)">保存</a>-->
<!--          <a-divider type="vertical"/>-->
          <a @click="viewDetail(props.rowId)">详情</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>
    <ZyStyleModelListDetails ref="ZyStyleModelListDetails"></ZyStyleModelListDetails>
  </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'
import ZyStyleModelListDetails from "@views/zystylemodel/modules/ZyStyleModelListDetails";

export default {
  name: 'ZyStyleModelList',
  mixins: [JeecgListMixin, mixinDevice],
  components: {
    ZyStyleModelListDetails,
    ZyStyleModelModal
  },
  data() {
    return {
      description: 'zy_style_model管理页面',
      biaoTi: '',
      // 表头
      // 工具栏的按钮配置
      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}不能为空'},
          ],
          disabled: true,
        },
        {
          title: '是否默认尺码',
          align: "center",
          width: '50px',
          key: 'isdefault',
          type: JVXETypes.select,
          dictCode: 'isdefault',
          defaultValue: 0,
        },
        {key: 'modelNumber', title: '型号编码', dictCode: 'modenumber', width: '120px', type: JVXETypes.select},
        {key: 'size', title: '码数', width: '90px', dictCode: 'size', type: JVXETypes.select},
        {key: 'anumbers', title: '型', width: '80px', dictCode: 'hsize', type: JVXETypes.select},
        {key: 'bnumbers', title: '号', width: '80px', dictCode: 'xsize', 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},
        {key: 'createTime', title: '创建时间', width: '100px', type: JVXETypes.datetime},

        {
          title: '操作',
          key: 'action',
          type: JVXETypes.slot,
          fixed: 'right',
          minWidth: '80px',
          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",
      },
      //参数
      styleId: '',
      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: {

    //新增触发事件
    added(event){
      //this.styleId = this.$route.query.id;
      event.row.styleId = this.$route.query.id;
      console.log("新增触发事件", event)
      let httpUrl = this.url.add;
      let method = 'post';
      //httpUrl += this.url.add;
      //method = 'post';
      httpAction(httpUrl, event.row, method).then((res) => {
        if (res.success) {
          this.$message.success(res.message);
          this.$emit('ok');
        } else {
          this.$message.warning(res.message);
        }
      })
    },
    //数据发生变化时事件
    handleValueChange(event) {

      //this.submitForm(event)
      console.log("//数据发生变化时事件", event);
      //const str = event.row.id;
      let httpUrl = '';
      let method = '';

      httpUrl += this.url.edit;
      method = 'put';

      httpAction(httpUrl, event.row, method).then((res) => {
        if (res.success) {
          this.$message.success(res.message);
          this.$emit('ok');
        } else {
          this.$message.warning(res.message);
        }
      })
    },
    // 详情
    viewDetail(id) {
      this.$refs.ZyStyleModelListDetails.showModal(id)
    },
    fanHui() {
      this.$router.push({
        path: '/src/views/zyclothsstyle/ZyClothsStyleList',
        //   query: {  // 路由携带参数
        //     'id': record.id,
        //     'typeId': record.typeId,
        //   }
        // });
      });
    },
    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.styleId = this.id;
        this.biaoTi = this.$route.query.styleNames + "款式型号管理";
        //console.log("**********传递到此层的id：" + this.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>