Sc-identific-code NPM

sc-identific-code

颂车网 - 前端插件 - 识客码
npm地址 - https://www.npmjs.com/package/sc-identific-code
注意： 识客码模块依赖于vue、element-ui
注意： element-ui如按需引入，需要导入必要的模块

// element-ui按需引入，必须实现$confirm、$message方法
{
	Message,
  MessageBox,
} from "element-ui"

Vue.prototype.$confirm = MessageBox.confirm
Vue.prototype.$message = Message

安装

# 安装插件依赖
$ yarn add sc-identific-code
# 或
$ npm install git+http://git.dingdangdata.com/dingdang-recognize-code/front-end/sc-identific-code.git

在 src/main.js 中挂载插件：

import Vue from "vue";

// 识客码
import SCIdentificCode from "sc-identific-code";
import 'sc-identific-code/dist/sc-identific-code.css';
Vue.use(SCIdentificCode);

new Vue({
el: "#app",
render: h => h(App)
});

模块

主要有二个功能模块，五个组件，其他对外仅暴露CodeManage、CustomerManage组件：

识客码管理模块 CodeManage组件；

	  - 识客码 新增、编辑、查看 模块 CodeManageEditDetail组件；

	  	- 识客码 页面预览 模块 CodeManageMobilePreview组件；

	  	- 识客码 欢迎语回复 模块 CodeManageWelcomeReply组件；

企微客户管理模块 CustomerManage组件；
- 企微客户变更弹窗模块 ModalProviderEdit 组件；

识客码管理

<code-manage
	:api="{
		fetchList,
		fetchRangeList,
		deleteItem,
		putItem,
		postRule,
		putRule,
		fetchRuleInfo,
		fetchDefaultImage,
		fetchUsersList,
	}"
	:upload="{
		uploadHeaders: uploadHeaders,
		uploadAction: httpConfig.api,
    uploadUrl: '/api/api/recognize/upload/picture',
	}"
></code-manage>

api 传递的是接口方法的props，组件内部会调用。注意：获取成员列表list（fetchUsersList）方法需要从src/api/identificCustomerManage.js导入

// src/api/identificCodeManage.js 模块接口文件
import * as http from '@/http';

// 获取业务适用范围
export const fetchRangeList = async () => {
  try {
    const res = await http.get(
      `/api/recognize/rule/range`
    );
    if (!res.data) throw "暂无数据";
    return res.data;
  } catch (error) {
    return Promise.reject(error);
  }
}
// 获取识别码管理list
export const fetchList = async (data, query) => {
  try {
    let params = {
      pageNumber: query.pageNumber || 1,
      pageSize: query.pageSize || 10
    };

    const res = await http.get(
      `/api/recognize/rule?pageNumber=${params.pageNumber}&pageSize=${params.pageSize}&keyWords=${data.keyWords}`
    );
    if (!res.data) throw "暂无数据";
    return res.data;
  } catch (error) {
    return Promise.reject(error);
  }
}
// 删除识别码规则
export const deleteItem = async (id) => {
  try {
    if (!id) throw "删除失败，缺少规则id!";

    const res = await http.del(
      `/api/recognize/rule/${id}`
    );
    return res;
  } catch (error) {
    return Promise.reject(error);
  }
}
// 修改识别码状态
export const putItem = async (data) => {
  try {
    if (!data.ruleNo) throw "更新失败，缺少规则id!";

    const res = await http.put(
      `/api/recognize/rule/status`,
      data
    );
    return res;
  } catch (error) {
    return Promise.reject(error);
  }
}
// 新建识别码规则
export const postRule = async (data) => {
  try {
    const res = await http.post(
      `/api/recognize/rule`,
      data,
    );
    return res;
  } catch (error) {
    return Promise.reject(error);
  }
}
// 修改识别码规则
export const putRule = async (data) => {
  try {
    if (!data.ruleNo) throw "更新失败，缺少规则id!";

    const res = await http.put(
      `/api/recognize/rule`,
      data
    );
    return res;
  } catch (error) {
    return Promise.reject(error);
  }
}
// 获取规则详细信息
export const fetchRuleInfo = async (ruleNo) => {
  try {
    if (!ruleNo) throw "更新失败，缺少规则id!";

    const res = await http.get(
      `/api/recognize/rule/baseInfo?ruleNo=${ruleNo}`
    );
    if (!res.data) throw "暂无数据";
    return res.data;
  } catch (error) {
    return Promise.reject(error);
  }
}
// 获取默认风格的图片
export const fetchDefaultImage = async () => {
  try {
    const res = await http.get(
      `/api/recognize/default/guide/image`
    );
    if (!res.data) throw "暂无数据";
    return res.data;
  } catch (error) {
    return Promise.reject(error);
  }
}

upload 传递的是上传图片header和action、url的props，组件内部会调用。

upload = {
	uploadHeaders: { Authorization: `Bearer test123456`},
	uploadAction: 'http://192.168.201.142:8081',
  uploadUrl: '/api/api/recognize/upload/picture',
}

企微客户管理

<customer-manage
	:api="{
		fetchList,
		fetchStatusList,
		updateTransfer,
		fetchUsersList,
	}"
></customer-manage>

api 传递的是接口方法的props，组件内部会调用。

// src/api/identificCustomerManage.js 模块接口文件
import * as http from '@/http';

// 获取企微客户管理list
export const fetchList = async (data, query) => {
  try {
    let params = {
      pageNumber: query.pageNumber || 1,
      pageSize: query.pageSize || 10
    };

    const res = await http.post(
      `/api/recognize/customer?pageNumber=${params.pageNumber}&pageSize=${params.pageSize}`,
      data
    );
    if (!res.data) throw "暂无数据";
    return res.data;
  } catch (error) {
    return Promise.reject(error);
  }
}
// 获取成员列表list
export const fetchUsersList = async () => {
  try {
    const res = await http.get(
      `/api/wework/users`,
    );
    if (!res.data) throw "暂无数据";
    return res.data;
  } catch (error) {
    return Promise.reject(error);
  }
}
// 获取成员账号状态list
export const fetchStatusList = async () => {
  try {
    const res = await http.get(
      `/api/recognize/customer/followUserStatus`,
    );
    if (!res.data) throw "暂无数据";
    return res.data;
  } catch (error) {
    return Promise.reject(error);
  }
}
// 变更操作
export const updateTransfer = async (data) => {
  try {
    const res = await http.post(
      `/api/recognize/customer/transfer`,
      data
    );
    return res;
  } catch (error) {
    return Promise.reject(error);
  }
}

发布

# 方式一：npm官方包

# 需要注册npm账号
npm adduser

# 修改npm原地址（注意.npmrc文件的镜像）
npm config set registry https://registry.npmjs.org/

# 修改好代码后，终端执行
npm run lib

npm login

npm publish

# 发布完成后，项目里面重新安装
$ yarn add sc-identific-code

# 方式二：git仓库包

# 修改好代码后

# 修改入口文件sc-identific-code/package.json
# "main": "dist/sc-identific-code.umd.min.js"
"main": "plugins/index.js"

# 提交代码后，项目里面只能git包重新安装使用
$ npm install git+http://git.dingdangdata.com/dingdang-recognize-code/front-end/sc-identific-code.git