cloud-web-corejs 1.0.54-dev.798 → 1.0.54-dev.799

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>

package/src/views/user/outLink/cc_form_view.vue

@@ -0,0 +1,185 @@
+<template>
+  <div
+    class="cc-entry"
+    v-loading="loading"
+    :element-loading-text="loadingText"
+    element-loading-background="rgba(255, 255, 255, 0.9)"
+  >
+    <div class="cc-entry__box" v-if="errMsg">
+      <el-alert :title="errMsg" type="error" :closable="false" show-icon />
+      <div class="cc-entry__footer">
+        <el-button type="primary" size="small" @click="start">重试</el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+/**
+ * 呼叫中心(CC)业务专用外链入口。
+ *
+ * 背景：业务系统(呼叫中心)只会带 appid / appkey / account / callNo 四个参数跳过来，
+ * 拿不到 form_outLinkView 所需的 tp（用户身份密文）。本页在 form_outLinkView 之前加一层：
+ *   1. 取四个参数
+ *   2. 调后台接口换取 tp
+ *   3. replace 到 /form_outLinkView，formCode 写死、dataId 固定 0
+ *
+ * 入口地址示例：
+ *   https://csmuat.chinamacro.com/#/cc_form_outLinkView
+ *     ?appid=6789B4BBAF71D4F9D79E0912856E04E
+ *     &appkey=坐席id
+ *     &account=坐席帐号
+ *     &callNo=来电手机
+ *
+ * 最终跳转：
+ *   #/form_outLinkView?url=/user/form/view/edit&formCode=xxx&dataId=0&tp=xxx&callNo=xxx...
+ */
+
+/* ------------------------------------------------------------------ *
+ * 业务定制配置：换业务页面只改这里
+ * ------------------------------------------------------------------ */
+const CC_CONFIG = {
+  // 固定的表单视图路由，form_outLinkView 的 url 参数
+  formUrl: "/user/form/view/edit",
+  // 写死的表单编码（按实际业务表单调整）
+  formCode: "patentApply_edit",
+  // 写死的单据 ID，新建为 0
+  dataId: "0",
+  // 换取 tp 的后台接口（需后台提供：入参 appId/appKey/account/callNo，出参 tp）
+  tpApi: USER_PREFIX + "/thirdparty_auth/getTpByCallCenter",
+  // 业务系统固定下发的 appid，链接未带时用它兜底
+  defaultAppId: "6789B4BBAF71D4F9D79E0912856E04E",
+};
+
+/** 透传给业务表单的参数（form_outLinkView 会 v-bind 到目标组件上） */
+const PASS_THROUGH = ["callNo", "account", "agentId"];
+
+export default {
+  name: "ccFormOutLinkView",
+  data() {
+    return {
+      loading: false,
+      loadingText: "正在获取身份信息…",
+      errMsg: "",
+    };
+  },
+  created() {
+    this.start();
+  },
+  methods: {
+    /** 大小写不敏感地取 query，业务系统对参数大小写不一定稳定 */
+    pickQuery(...names) {
+      let query = this.$route.query || {};
+      let keys = Object.keys(query);
+      for (let name of names) {
+        let key = keys.find((k) => k.toLowerCase() === name.toLowerCase());
+        if (key && query[key] !== "" && query[key] !== undefined && query[key] !== null) {
+          return query[key];
+        }
+      }
+      return "";
+    },
+    resolveParams() {
+      return {
+        appId: this.pickQuery("appid", "appId") || CC_CONFIG.defaultAppId,
+        appKey: this.pickQuery("appkey", "appKey"),
+        account: this.pickQuery("account"),
+        callNo: this.pickQuery("callNo", "callno", "phone"),
+      };
+    },
+    /** 兼容后台把 tp 放在 objx 字符串 / objx.tp / objx.thirdpartyInfo 三种返回形态 */
+    resolveTp(res) {
+      let objx = res && res.objx;
+      if (!objx) return "";
+      if (typeof objx === "string") return objx;
+      return objx.tp || objx.thirdpartyInfo || objx.thirdparty_info || "";
+    },
+    start() {
+      this.errMsg = "";
+      let params = this.resolveParams();
+      let missing = ["appId", "appKey", "account"].filter((key) => !params[key]);
+      if (missing.length) {
+        this.errMsg = "缺少必要参数：" + missing.join("、") + "，请检查呼叫中心跳转链接";
+        return;
+      }
+      this.getTp(params);
+    },
+    getTp(params) {
+      this.loading = true;
+      this.$http({
+        url: CC_CONFIG.tpApi,
+        method: "post",
+        data: params,
+        // 无 token 场景，且自行接管提示与遮罩
+        useToken: false,
+        isLoading: false,
+        failMsg: false,
+        errorMsg: false,
+        success: (res) => {
+          let tp = this.resolveTp(res);
+          if (!tp) {
+            this.loading = false;
+            this.errMsg = "身份信息(tp)获取失败：接口未返回 tp";
+            return;
+          }
+          this.redirect(params, tp);
+        },
+        fail: (res) => {
+          this.loading = false;
+          this.errMsg = "身份信息(tp)获取失败：" + ((res && (res.content || res.msg)) || "接口返回异常");
+        },
+        error: (err) => {
+          this.loading = false;
+          this.errMsg = "身份信息(tp)获取失败：" + ((err && err.message) || "网络异常");
+        },
+      });
+    },
+    redirect(params, tp) {
+      this.loadingText = "正在打开单据…";
+      let query = {
+        url: CC_CONFIG.formUrl,
+        formCode: CC_CONFIG.formCode,
+        dataId: CC_CONFIG.dataId,
+        tp: tp,
+      };
+      // 来电号码等业务参数透传给表单，供表单脚本取用
+      let source = { ...params, agentId: params.appKey };
+      PASS_THROUGH.forEach((key) => {
+        if (source[key]) {
+          query[key] = source[key];
+        }
+      });
+      let i18nLang = this.pickQuery("i18nLang");
+      if (i18nLang) {
+        query.i18nLang = i18nLang;
+      }
+      // replace：不在历史里留下本入口页，避免回退时重复换取 tp
+      // 注：vue-router 3.0.2 的 replace 不返回 Promise，不能链 .then/.catch
+      this.$router.replace({
+        path: "/form_outLinkView",
+        query: query,
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.cc-entry {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100vh;
+}
+
+.cc-entry__box {
+  width: 420px;
+  max-width: 80%;
+}
+
+.cc-entry__footer {
+  margin-top: 12px;
+  text-align: center;
+}
+</style>