gxd-vue-library/build/template/coder/pages_info.txt

依赖与element Ui插件库，聚福宝福利PC端插件库

{{if fileType=== 'js'}}
  {{if (item.isActions || item.isState || item.setting.vuexFn)}}
    import {
      {{if item.isActions && item.fnNames.length > 0 || item.setting.vuexFn}}
      mapActions,
      {{/if}}
      {{if item.isState && item.states.length > 0}}
      mapState,
      {{/if}}
    } from 'vuex';
  {{/if}}
  import XdContentInfo from "@/components/XdContentInfo";
  import XdTableImage from "@/components/XdTableImage";
  import XdTableStatus from "@/components/XdTableStatus";
  import checkPermission from "@/utils/permission";
  import {{item.modelName}} from "@/constant/modules/{{item.modelName}}";
  import {Loading} from 'element-ui';

  /**
   * @description {{item.modeTitle}} - {{item.title}}
   * @author coder
   * @module @/pages/{{item.modelName}}/{{item.name}}.vue
   */
   export default {
     name: "{{item.pageName}}",
     components: {
       XdContentInfo,
       XdTableImage,
       XdTableStatus
     },
     {{if item.isState && item.states.length > 0}}
     computed: {
       ...mapState('{{item.modelName}}', [
         {{each item.states}}
           '{{$value}}',
         {{/each}}
       ])
     },
     {{/if}}

     data() {
       return {
         {{if item.setting.paramsIDkey}}
         /**请求详情ID**/
         params: {
           {{item.setting.paramsIDkey}}: null
         },
         {{/if}}
         /**数据列表项**/
         tables: []
       }
     },

     created() {
       {{if item.setting.paramsIDkey}}
       this.$set(this.params, '{{item.setting.paramsIDkey}}', this.$route.query.{{item.setting.paramsIDkey}});
       {{/if}}
       this.getHandleDetail();
     },

     methods: {
       {{if item.isActions && item.fnNames.length > 0}}
       ...mapActions('{{item.modelName}}', [
         {{each item.fnNames}}
           '{{$value}}',
         {{/each}}
       ]),
       {{else if item.setting.vuexFn}}
        ...mapActions('{{item.modelName}}', [
           '{{item.setting.vuexFn}}'
         ]),
       {{/if}}


       /**
        * @description 获取{{item.title}}
        */
       getHandleDetail() {
         let loading = Loading.service({});

         //正式数据调用模版
         {{if item.setting.vuexFn}}
           this.{{item.setting.vuexFn}}(this.params)
           .then(info=>{
             console.log(info);
             loading.close()
           })
           .catch(this.$xdLog.catch);
         {{/if}}

         //测试数据
         setTimeout(()=>{
           this.tables = {{@ item.testData}};
           loading.close()
         },1000)
       },

       {{if item.methods && item.methods.confirm}}
       /**
        * @description 预设操作需要用户确认方法
        * @param item
        */
       handleConfirm(item) {
         this.$confirm('您确定要将当前记录删除吗?', '提示', {
           confirmButtonText: '确定',
           cancelButtonText: '取消',
           type: 'warning'
         })
           .then(() => {
             //todo
           })
           .catch(() => {
             //todo
           });
       },
       {{/if}}
     }
   }

{{else if fileType=== 'html'}}
  <template>
    <div class="app-container">
      <el-card class="app-container__content">
        <xd-content-info :list="tables" title="订单详情">
          <!--插槽部分-->
          <template slot-scope="scope">
            <!--scope.label=>$index or key(自定义key值)-->
            <!--scope.item=>数据列表项-->
            <div
              v-if="scope.label === 'image'"
              class="app-container__content-custom"
            >
              <xd-table-image
                 :thumb="scope.item.value"
                 :thumb-preview="[scope.item.value]"
                 width="120"
                 height="90"
               ></xd-table-image>
            </div>
            <div
              class="app-container__content-custom"
              v-else-if="scope.label === 'status'"
            >
             <xd-table-status
               :status="scope.item.value ==='Y'"
               :message="['正常', '禁用']"
             ></xd-table-status>
            </div>
          </template>
          <!--插槽部分 结束-->
        </xd-content-info>
      </el-card>
    </div>
  </template>
{{else if fileType=== 'css'}}
.app-container__title {
  font-size: 16px;
  line-height: 24px;
  padding: 0 0 20px;
  font-weight: bold;
}

.app-container__content-custom {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

@media screen and (max-width: 768px) {
  .app-container__title {
    padding: 0 0 10px;
  }
}
{{/if}}