# sc-identific-code

> sc-identific-code识别码

Latest version **1.2.9** (published 2022-12-06) · ISC license · 0 weekly downloads

## Install

```sh
npm install sc-identific-code
pnpm add sc-identific-code
yarn add sc-identific-code
bun add sc-identific-code
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.9 |
| Published | 2022-12-06 |
| First published | 2022-08-11 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 2.8 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | erikison |
| Maintainers | erikison |
| Keywords | vue, identific, code |

## Links

- npm: https://www.npmjs.com/package/sc-identific-code
- Repository: http://git.dingdangdata.com/dingdang-recognize-code/front-end/sc-identific-code
- npm.io page: https://npm.io/package/sc-identific-code

## Dependencies (3)

- [vue](https://npm.io/package/vue.md) ^2.6.11
- [element-ui](https://npm.io/package/element-ui.md) 2.15.5
- [emoji-mart-vue](https://npm.io/package/emoji-mart-vue.md) ^2.6.6

## Alternatives

- [flatbuffers](https://npm.io/package/flatbuffers.md) — 6.0M weekly downloads
- [jwt-simple](https://npm.io/package/jwt-simple.md) — 259.5K weekly downloads
- [@exodus/patch-broken-hermes-typed-arrays](https://npm.io/package/@exodus/patch-broken-hermes-typed-arrays.md) — 28.5K weekly downloads
- [@native-to-anchor/buffer-layout](https://npm.io/package/@native-to-anchor/buffer-layout.md) — 12.2K weekly downloads
- [binary-parser-encoder](https://npm.io/package/binary-parser-encoder.md) — 5.3K weekly downloads

## Recent versions

- 1.2.9 (latest) — 2022-12-06
- 1.2.8 — 2022-11-04
- 1.2.7 — 2022-10-31
- 1.2.6 — 2022-10-21
- 1.2.5 — 2022-10-21
- 1.2.4 — 2022-09-16
- 1.2.3 — 2022-09-15
- 1.2.2 — 2022-09-15
- 1.2.1 — 2022-09-15
- 1.2.0 — 2022-09-15
- 1.1.0 — 2022-09-02
- 1.0.1 — 2022-08-15
- 1.0.0 — 2022-08-11

## README

# sc-identific-code

> 颂车网 - 前端插件 - 识客码

> npm地址 - https://www.npmjs.com/package/sc-identific-code

> 注意：** 识客码模块依赖于vue、element-ui  **

> 注意：** element-ui如按需引入，需要导入必要的模块  **

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

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

## 安装

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

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

```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 组件；

## 识客码管理

```html
<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导入

```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，组件内部会调用。

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

## 企微客户管理

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

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

```js
// 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);
  }
}
```

## 发布

```bash
# 方式一：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
```

```bash
# 方式二：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
```

## 依赖文档

- [如何发布自己的npm包](https://blog.csdn.net/qq_33286909/article/details/108421181)
- [npm包发布详细教程](https://blog.csdn.net/u010059669/article/details/109715342)
- [自己开发的Vue组件库，把每个单独的组件发布npm包，整体的组件库发布一个包](https://www.zhihu.com/question/427857259)

## 关于

颂车网 © 前端团队 技术支持

---
_Source: https://npm.io/package/sc-identific-code · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._