cloud-web-corejs 1.1.0-dev.11 → 1.1.0-dev.14

package/src/views/demo/bizTab/wf/list.vue

@@ -0,0 +1,242 @@
+<template>
+  <biz-tab-list-page
+    ref="bizTab"
+    :listLabel="$t1('列表')"
+    :titleField="BILL.titleField"
+    :addTitle="$t1('新增')"
+    :behavior="tabBehavior"
+    @refresh-list="searchEvent"
+  >
+    <!-- ===== 列表页签 ===== -->
+    <template #list>
+      <vxe-grid
+        ref="table-m1"
+        v-bind="vxeOption"
+        @resizable-change="$vxeTableUtil.onColumnWitchChange"
+        @custom="$vxeTableUtil.customHandle"
+      >
+        <template #form>
+          <div class="clearfix screen-btns">
+            <div class="fl">
+              <vxe-button
+                status="primary"
+                type="text"
+                plain
+                class="button-sty"
+                icon="el-icon-plus"
+                @click="openAdd"
+                >{{ $t1("新增") }}</vxe-button
+              >
+              <!-- demo 用：现场切换「提交/审批完成后」的页签行为 -->
+              <el-switch
+                v-model="closeAfterWf"
+                class="behavior-switch"
+                :active-text="$t1('提交/通过后关闭页签回列表')"
+              ></el-switch>
+            </div>
+            <div class="fr">
+              <vxe-button
+                icon="el-icon-brush"
+                class="button-sty"
+                type="text"
+                status="primary"
+                plain
+                @click="resetEvent"
+                >{{ $t1("重置") }}</vxe-button
+              >
+              <vxe-button
+                status="warning"
+                icon="el-icon-search"
+                class="button-sty"
+                @click="searchEvent"
+                >{{ $t1("搜索") }}</vxe-button
+              >
+            </div>
+          </div>
+          <vxe-form
+            ref="form"
+            class="screen-box"
+            title-width="92px"
+            title-align="right"
+            :data="formData"
+            @submit="searchEvent"
+            @reset="resetEvent"
+          >
+            <vxe-form-item :title="$t1('单号') + ':'" field="sn">
+              <template v-slot>
+                <el-input v-model="formData.sn" size="small" clearable />
+              </template>
+            </vxe-form-item>
+            <vxe-form-item :title="$t1('阶梯价名称') + ':'" field="ladderName">
+              <template v-slot>
+                <el-input v-model="formData.ladderName" size="small" clearable />
+              </template>
+            </vxe-form-item>
+            <vxe-form-item :title="$t1('单据状态') + ':'" field="status">
+              <template v-slot>
+                <el-select
+                  v-model="formData.status"
+                  size="small"
+                  clearable
+                  @clear="formData.status = null"
+                >
+                  <el-option
+                    v-for="(item, key) in STATUS_MAP"
+                    :key="key"
+                    :label="item.label"
+                    :value="Number(key)"
+                  ></el-option>
+                </el-select>
+              </template>
+            </vxe-form-item>
+          </vxe-form>
+        </template>
+
+        <template #sn="{ row, rowIndex }">
+          <a href="javascript:void(0);" class="a-link" @click="openDetail(row, rowIndex)">
+            {{ row.sn }}
+          </a>
+        </template>
+        <template #status="{ row }">
+          <div :class="getStatus(row).cls">{{ getStatus(row).label }}</div>
+        </template>
+        <template #operate="{ row, rowIndex }">
+          <a href="javascript:void(0);" class="a-link" @click="openDetail(row, rowIndex)">
+            <el-tooltip
+              :enterable="false"
+              effect="dark"
+              :content="$t1('查看')"
+              placement="top"
+              popper-class="tooltip-skin"
+              ><i class="el-icon-view"
+            /></el-tooltip>
+          </a>
+        </template>
+      </vxe-grid>
+    </template>
+
+    <!-- ===== 详情页签（新增/查看共用同一个组件） ===== -->
+    <template #detail="{ tab }">
+      <bill-detail :tab="tab" />
+    </template>
+  </biz-tab-list-page>
+</template>
+
+<script>
+/**
+ * demo C：自定义控制器 + 流程（std 手写页面那套写法）。
+ *
+ * 与 demo B 的区别只在数据通道：这里是 /ladderPrice/get|save|update 这类自己写的接口，
+ * demo B 是通用 bd_api + formCode。页签、流程、翻单这些用法完全一样。
+ *
+ * 接口与 wfCode 见 ./billConfig.js；写法对齐本仓库 views/pmd/price/ladderPrice/。
+ * 菜单/路由：@base/views/demo/bizTab/wf/list（本地已在 router/modules/customer.js 注册）
+ */
+import BizTabListPage from "@base/components/bizTab/BizTabListPage.vue";
+import billDetail from "./detail.vue";
+import { BILL, STATUS_MAP } from "./billConfig";
+
+export default {
+  name: "demo_bizTab_wf:list",
+  components: { BizTabListPage, billDetail },
+  data() {
+    return {
+      BILL,
+      STATUS_MAP,
+      vxeOption: {},
+      formData: {},
+      closeAfterWf: false,
+    };
+  },
+  computed: {
+    tabBehavior() {
+      if (!this.closeAfterWf) return "refreshCurrent";
+      return {
+        submit: "closeToList",
+        agree: "closeToList",
+        default: "refreshCurrent",
+      };
+    },
+  },
+  mounted() {
+    this.initTableList();
+  },
+  methods: {
+    searchEvent() {
+      this.$refs["table-m1"].commitProxy("reload");
+    },
+    resetEvent() {
+      this.formData = {};
+      this.$refs["table-m1"].commitProxy("reload");
+    },
+    getStatus(row) {
+      return STATUS_MAP[row.status] || { label: "", cls: "" };
+    },
+    // 新增页签也传快照：保存成功后新单会被插到序列首位，翻单按钮随即可用
+    openAdd() {
+      this.$refs.bizTab.openAdd(null, { navRows: this.getListRows() });
+    },
+    // 把当前列表顺序和行下标一起传进去，详情头部就有「上一单/下一单」
+    openDetail(row, rowIndex) {
+      this.$refs.bizTab.openDetail(row, null, {
+        navRows: this.getListRows(),
+        navIndex: rowIndex != null ? rowIndex : -1,
+      });
+    },
+    getListRows() {
+      let grid = this.$refs["table-m1"];
+      return grid ? grid.getTableData().fullData : null;
+    },
+    initTableList() {
+      let tableOption = {
+        vue: this,
+        tableRef: "table-m1",
+        tableName: "demo-bizTab-wf-list-m1",
+        path: BILL.urls.listPage,
+        param: () => {
+          return { ...this.formData };
+        },
+        columns: [
+          { type: "checkbox", width: 48, resizable: false, fixed: "left" },
+          {
+            title: this.$t1("单号"),
+            field: "sn",
+            width: 150,
+            fixed: "left",
+            slots: { default: "sn" },
+          },
+          { title: this.$t1("阶梯价名称"), field: "ladderName", width: 180 },
+          {
+            title: this.$t1("单据状态"),
+            field: "status",
+            width: 100,
+            slots: { default: "status" },
+          },
+          { title: this.$t1("开始时间"), field: "startDate", width: 120 },
+          { title: this.$t1("结束时间"), field: "endDate", width: 120 },
+          { title: this.$t1("机构名称"), field: "saleOrgNames", minWidth: 180 },
+          { title: this.$t1("备注"), field: "memo", minWidth: 150 },
+          { title: this.$t1("创建人"), field: "createBy", width: 110 },
+          { title: this.$t1("创建时间"), field: "createDate", width: 160 },
+          {
+            title: "",
+            width: 47,
+            fixed: "right",
+            sortable: false,
+            slots: { default: "operate" },
+          },
+        ],
+      };
+      this.$vxeTableUtil.initVxeTable(tableOption).then((opts) => {
+        this.vxeOption = opts;
+      });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.behavior-switch {
+  margin-left: 16px;
+}
+</style>