添加headers

RRMARK.md

@@ -1,3 +1,5 @@
+## 新版
+
 ## 备注
 
 ```
@@ -27,7 +29,7 @@ export async function _mjsInit() {
   // 页面环境：0提交(其它)，1查看，2编辑(审批)
   if (!mjs.env) { }
 
-  this.request.xhr.doPost("xxxx")
+  mjs.request.xhr.doPost("xxxx")
 }
 
 //---------------------- event ----------------------//

package.json

@@ -29,7 +29,7 @@
     "axios": "^0.19.2",
     "babel-runtime": "^6.26.0",
     "diff": "^5.0.0",
-    "dingtalk-jsapi": "^2.10.3",
+    "dingtalk-jsapi": "^3.0.33",
     "fecha": "^4.2.0",
     "file-saver": "^2.0.5",
     "js-pinyin": "^0.1.9",

src/aliwork/com.js

@@ -53,9 +53,22 @@ com.showConfirm = function (title, content, type = "confirm") {
   });
 };
 
+/// toast access
+com.toastAccess2 = function (isShow, title) {
+  if (isShow) {
+    this.utils.toast({
+      title: title, // 'success', 'warning', 'error', 'notice', 'help', 'loading'
+      type: 'error',
+      size: 'large',
+      duration: 2000, // 毫秒, type 为 loding 时无效
+    });
+    throw new Error(title);
+  }
+}
+
 // 提交校验toast
+// TODO: 阻断 throw
 com.toastAccess = function (isShow, title, resolve, reject) {
-  console.log(isShow, title)
   if (isShow) {
     mjs.$this.utils.toast({
       title: title, // 'success', 'warning', 'error', 'notice', 'help', 'loading'
@@ -70,6 +83,17 @@ com.toastAccess = function (isShow, title, resolve, reject) {
   return true;
 }
 
+/**
+ * TODO:
+// 弹出框填写校验
+export function _validateDialog(callback, ...compIds) {
+  for (const compId of compIds) {
+    this.$(compId).validate
+  }
+
+}
+ */
+
 /**
  * ppExt: 提交校验 [存在请求若报错无需catch]
  * 1. 返回Promise时，不能在Promise外直接return，会提示undefined

src/aliwork/dom.js

@@ -201,22 +201,22 @@ dom.removePrinterForDefault = function () {
 
 }
 
-// 隐藏撤销按钮
+// 隐藏撤销按钮 [ppExt: 11.27 宜搭更新后, 直接remove导致dom报错, 应该是有对dom操作, 更新兼容]
 dom.removeTerminationButton = function () {
   if (!mjs.env) return;
   // pc
   setTimeout(() => {
     const doms = document.querySelectorAll(".deep-button-group-item");
     if (doms.length) {
-      doms[0].remove()
+      doms[doms.length - 1].style.display = "none";
       return
     }
-  }, 200)
+  }, 400)
   // mobile
   setTimeout(() => {
     const doms = document.querySelectorAll(".icon-box.chexiao");
     if (doms.length) {
-      doms[0].remove()
+      doms[doms.length - 1].style.display = "none";
     }
   }, 400);
 }

src/main.js

@@ -15,6 +15,7 @@ import bus from "./aliwork/bus";
 import optimize from "./utils/optimize";
 import storage from "./utils/storage";
 import date from "./vendor/date";
+import math from "./utils/math"
 
 import conf from "./config/conf"; /** @全局公共配置 */
 import xhr from "./service/request"; /** @前端网络对象 */
@@ -39,6 +40,7 @@ export async function init (_this, config = {}) {
   this.optimize = optimize; // 优化
   this.storage = storage; // 存储
   this.date = date; // 日期
+  this.math = math; // 数字
   this.request = { dp, xhr, net: { crossDomainByScript } }; // 请求
   this.ding = ding;
   this.corp = {

src/sample/guyuan.js

@@ -6,14 +6,14 @@ export default {
   // 修改公共配置
   init () {
     if (process.env.NODE_ENV == "development") {
-      mjs.conf.api = "https://mc.cloudpure.cn/frp/guyuan/";
+      mjs.conf.api = "https://mc.cloudpure.cn/api/guyuan";
     } else {
-      mjs.conf.api = "https://mc.cloudpure.cn/api/guyuan/";
+      mjs.conf.api = "https://mc.cloudpure.cn/api/guyuan";
     }
     return this; // this 指向当前项目本身
   },
 
-  // 发票识别, 混票
+  // 发票识别, 混票  ppExt: 官方已停止更新, PDF多张异常
   async mixedInvoice (file) {
     const rsp = await mjs.request.xhr.doPost(`${mjs.conf.api}/invoice-iv`, {}, {
       url: file.url,
@@ -46,12 +46,109 @@ export default {
     mjs.$this.$('tableField_liv5f4d2').setValue(invoices);
   },
 
+  // 发票识别, 混票 ppExt: 新版本官方返回数据已结构化, 以官方为准
+  async mixedInvoice2 (file) {
+    const rsp = await mjs.request.xhr.doPost(`${mjs.conf.api}/invoice-iv2`, {}, {
+      url: file.url,
+      isPdf: file.type.includes("pdf"),
+      size: file.size / 1024 / 1024
+    })
+    // 明细数据匹配表头
+    const headers = mjs.$this.$("tableField_liv5f4d2").props.children.props.children.map(({ props: { label, fieldId } }) => ({ label, compId: fieldId }))
+    const prop = rsp.data.dto; // 通用字段定义
+    //合计数据
+    let amount = 0, tax = 0, exTax = 0;
+    const invoices = rsp.data.result.map(item => {
+      const rowData = Object.keys(prop).reduce((acc, cur) => {
+        const comp = headers.find(c => c.label == cur)
+        if (comp) {
+          acc[comp.compId] = item[prop[cur]]
+        }
+        // 非标准表头，格式化
+        if (cur == "价税合计") {
+          acc.numberField_liihyrt7 = item.amount;
+        }
+        if (cur == "开票日期") {
+          acc.textField_livimrja = item[prop[cur]];
+          acc.dateField_liihyrt9 = new Date(acc.textField_livimrja).getTime()
+        }
+        return acc;
+      }, {})
+      // 合计数据
+      amount += item.amount;
+      tax += item.tax;
+      exTax += item.excludingTax;
+      // 发票数据标题: 销售方 + 发票类型 + 价税合计
+      rowData.textField_ljmgqvbz = item.sellerName + "-" + item.kindName + "-" + item.amount
+      return rowData;
+    });
+    mjs.$this.$('numberField_ln05ra1i').setValue(amount);
+    mjs.$this.$('numberField_ln05ra1n').setValue(exTax);
+    mjs.$this.$('numberField_ln05ra1o').setValue(tax);
+    mjs.$this.$('tableField_liv5f4d2').setValue(invoices);
+    return invoices;
+  },
+
+  // 发票识别, prd 10.30 调整为多选识别 [同时选择多个文件，触发多次回调，全量查询方案: 防抖调用]
+  async mixedInvoice3 (files) {
+    let prop = {} // 通用字段定义
+    const results = []
+    for (const file of files) {
+      console.log(file)
+      const rsp = await mjs.request.xhr.doPost(`${mjs.conf.api}/invoice-iv2`, {}, {
+        url: file.url,
+        isPdf: file.name.includes("pdf"),
+        size: file.size / 1024 / 1024
+      })
+      prop = rsp.data.dto;
+      results.push(...rsp.data.result);
+    }
+    // 明细数据匹配表头 [二次获取无效]
+    if (!this.headers) {
+      this.headers = mjs.$this.$("tableField_liv5f4d2").props.children.props.children.map(({ props: { label, fieldId } }) => ({ label, compId: fieldId }))
+    }
+    //合计数据
+    let amount = 0, tax = 0, exTax = 0;
+    const invoices = results.map(item => {
+      const rowData = Object.keys(prop).reduce((acc, cur) => {
+        const comp = this.headers.find(c => c.label == cur)
+        if (comp) {
+          acc[comp.compId] = item[prop[cur]]
+        }
+        // 非标准表头，格式化
+        if (cur == "价税合计") {
+          acc.numberField_liihyrt7 = item.amount;
+        }
+        if (cur == "开票日期") {
+          acc.textField_livimrja = item[prop[cur]];
+          acc.dateField_liihyrt9 = new Date(acc.textField_livimrja).getTime()
+        }
+        return acc;
+      }, {})
+      // 合计数据
+      amount += item.amount;
+      tax += item.tax;
+      exTax += item.excludingTax;
+      // 发票数据标题: 销售方 + 发票类型 + 价税合计
+      rowData.textField_ljmgqvbz = item.sellerName + "-" + item.kindName + "-" + item.amount
+      rowData.radioField_loc7gxul = "否";
+      return rowData;
+    });
+    mjs.$this.$('numberField_ln05ra1i').setValue(amount);
+    mjs.$this.$('numberField_ln05ra1n').setValue(exTax);
+    mjs.$this.$('numberField_ln05ra1o').setValue(tax);
+    mjs.$this.$('tableField_liv5f4d2').setValue(invoices);
+    return invoices;
+  },
+
   // 批量验证
   batchCheck () {
     return new Promise((resolve, reject) => {
       const details = mjs.$this.$('tableField_liv5f4d2').getValue()
       const param = details.map(item => {
         return {
+          // ppExt: 全电票, 新版本识别接口, 返回名称为: 电子发票(普通发票) 不包含全电标识, 发类型为: 全电发票. 注意取值
+          name: item.textField_liwbaczr,
           kindName: item.selectField_liihyrta,
           serial: item.textField_liihyrt8,
           code: item.textField_lil34mnc,
@@ -67,7 +164,17 @@ export default {
       })
       mjs.request.xhr.doPost(`${mjs.conf.api}/invoice-va`, {}, {
         param
-      }).then(() => resolve()).catch(() => reject()) // ppExt: 需要拦截错误, 否则一次失败后程序阻断
+      }).then(() => resolve()).catch(err => {
+        if (err.includes("【")) {
+          const s = err.split("】")[0]
+          const e = s.split("【")[1]
+          for (let i = 1; i < e; i++) {
+            details[i - 1].radioField_loc7gxul = "是"
+          }
+          mjs.$this.$('tableField_liv5f4d2').setValue(details)
+        }
+        reject()
+      }) // ppExt: 需要拦截错误, 否则一次失败后程序阻断
     })
   },
 
@@ -85,6 +192,8 @@ export default {
       }
       // 非作废校验
       const param = {
+        // ppExt: 全电票, 新版本识别接口, 返回名称为: 电子发票(普通发票) 不包含全电标识, 发类型为: 全电发票. 注意取值
+        name: mjs.$this.$("textField_ljasce9j").getValue(),
         kindName: mjs.$this.$("selectField_liihyrta").getValue(),
         serial: mjs.$this.$("textField_liihyrt8").getValue(),
         code: mjs.$this.$("textField_lil34mnc").getValue(),

src/service/request.js

@@ -168,7 +168,7 @@ export const KEY_IGNORE_RESPONSE = "ignoreResponse";
 export const KEY_NO_LOAD_TOKEN = "noLoadToken";
 
 /** 0.通用请求 */
-request.do = function (url, param = {}, data = {}, conf = {}, method) {
+request.do = function (url, param = {}, data = {}, conf = {}, method, headers) {
   const params = qs.stringify(param);
   if (params) {
     const joint = url.includes("?") ? "&" : "?";
@@ -179,35 +179,36 @@ request.do = function (url, param = {}, data = {}, conf = {}, method) {
     method,
     data,
     conf,
+    headers,
     responseType: conf[KEY_EXPORT_TYPE]
   });
 }
 
 /** 1.get: url上param, 后端取值@requestParam，也可用request.getParameterMap().get(“key”), 参数会被放入一个集合 */
-request.doGet = function (url, param = {}, conf = {}) {
-  return this.do(url, param, null, conf, "GET");
+request.doGet = function (url, param = {}, conf = {}, headers = {}) {
+  return this.do(url, param, null, conf, "GET", headers);
 };
 
 /** 2.post: body内json, 后端取值@requestBody, Map 或转为实体 */
-request.doPost = function (url, param = {}, data = {}, conf = {}) {
-  return this.do(url, param, data, conf, "POST");
+request.doPost = function (url, param = {}, data = {}, conf = {}, headers = {}) {
+  return this.do(url, param, data, conf, "POST", headers);
 };
 
 /** 3.form: body内格式为form, 和content-type有关系, 需要为form格式后端才能读取: 不能使用@RequestBody，参数会自动解析到实体; 若不是实体通过方法转Map */
-request.doForm = function (url, param, data = {}, conf = {}) {
+request.doForm = function (url, param, data = {}, conf = {}, headers = {}) {
   // 变更请求头类型, 传递form
   conf[KEY_M_CONTENT_TYPE] = true;
-  return this.doPost(url, param, data, conf);
+  return this.doPost(url, param, qs.stringify(data), conf, headers);
 };
 
 
 /** 4.upload: body-formData, 一般用于文件上传, 追加数据流 */
-request.doUpload = function (url, param, data = {}, conf = {}) {
+request.doUpload = function (url, param, data = {}, conf = {}, headers = {}) {
   const formData = new FormData();
   Object.keys(data).forEach(prop => {
     formData.append(prop, data[prop]);
   });
-  return this.doPost(url, param, formData, conf);
+  return this.doPost(url, param, formData, conf, headers);
 };
 
 /** 5.并发多个请求优先(类方法) */
@@ -240,10 +241,10 @@ request.doDownload = function (blobData, fileName, type) {
 };
 
 /** 2.Excel: 导出并下载blob数据 */
-request.doExport = async function (url, param, data = {}, method = "POST", type) {
+request.doExport = async function (url, param, data = {}, method = "POST", type, headers = {}) {
   const rsp = await request.do(url, param, data, {
     [KEY_EXPORT_TYPE]: "blob"
-  }, method);
+  }, method, headers);
   // 若响应数据为流
   if (!rsp.code) {
     this.doDownload(rsp.data, rsp.fileName, type);
@@ -252,20 +253,20 @@ request.doExport = async function (url, param, data = {}, method = "POST", type)
 };
 
 /** 2.1.post方式下载blob数据 */
-request.doExportByPOST = async function (url, param, data = {}, type) {
-  return this.doExport(url, param, data, "POST", type)
+request.doExportByPOST = async function (url, param, data = {}, type, headers = {}) {
+  return this.doExport(url, param, data, "POST", type, headers)
 };
 
 /** 2.2.get方式下载blob数据 */
-request.doExportByGET = async function (url, param, type) {
-  return this.doExport(url, param, null, "GET", type)
+request.doExportByGET = async function (url, param, type, headers = {}) {
+  return this.doExport(url, param, null, "GET", type, headers)
 };
 
 /** 3.Excel: 自定义导入, 自动下载失败记录 */
-request.doImport = async function (url, file, param, data) {
+request.doImport = async function (url, file, param, data, headers) {
   const rsp = await request.doPostFormData(url, param, { file, ...data }, {
     [KEY_EXPORT_TYPE]: "blob"
-  });
+  }, headers);
   // 若响应数据为流
   if (!rsp.code) {
     progress.showErrorMessage("部分导入失败");

src/utils/math.js

@@ -28,7 +28,7 @@ export default {
     }
     result = Math.round(num * 100) / 100;
     let s_x = result.toString();
-    const pos_decimal = s_x.indexOf(".");
+    let pos_decimal = s_x.indexOf(".");
     // 当整数时, pos_decimal=-1 自动补0
     if (pos_decimal < 0) {
       pos_decimal = s_x.length;
@@ -39,7 +39,15 @@ export default {
       s_x += "0"
     }
     return s_x;
-  }
-}
+  },
 
+  // 求两整数最大公约数
+  gye (a, b) {//辗转相除法
+    return a % b == 0 ? b : gye(b, a % b)
+  },
 
+  // 求出最小公倍数
+  gbe (m, n) {
+    return sun = m * n / gye(m, n) //最小公倍数等于=两数的乘积/最大公约数
+  },
+}

src/vendor/amap.js

@@ -0,0 +1,42 @@
+
+
+export function loadAMap (key, loadUI = true, version = "2.0") {
+  return new Promise((resolve, reject) => {
+    if (!key) {
+      throw new Error("key不能为空");
+    }
+    if (window.AMap) {
+      return resolve(window.AMap);
+    }
+    const src = `https://webapi.amap.com/maps?v=${version}&key=${key}&callback=onAMapLoad`;
+    const script = document.createElement("script");
+    script.onerror = () => {
+      return reject();
+    };
+    script.src = src;
+    document.head.appendChild(script);
+    window.onAMapLoad = async () => {
+      if (loadUI) {
+        await loadAMapUI();
+      }
+      resolve(window.AMap);
+    }
+  })
+}
+
+export function loadAMapUI () {
+  return new Promise((resolve, reject) => {
+    if (window.AMapUI) {
+      return resolve(window.AMapUI);
+    }
+    const script = document.createElement("script");
+    script.src = "https://webapi.amap.com/ui/1.1/main.js";
+    document.head.appendChild(script);
+    script.onload = () => {
+      return resolve(window.AMapUI);
+    };
+    script.onerror = () => {
+      return reject();
+    };
+  });
+}

src/vendor/lib/amap/map.css

@@ -0,0 +1,460 @@
+html {
+  font-size: 12px;
+}
+.amap-copyright {
+  box-sizing: content-box;
+}
+* {
+  box-sizing: border-box;
+}
+.input-textarea {
+  color: grey;
+  height: 8em;
+  overflow: auto;
+  border-radius: 0.4rem;
+  border: 1px solid #ced4da;
+  margin-bottom: 1rem;
+}
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+    "Segoe UI Symbol", "Noto Color Emoji";
+  line-height: 1.5;
+  font-weight: 300;
+  color: #111213;
+}
+
+hr {
+  margin: 0.5rem 0;
+  box-sizing: content-box;
+  height: 0;
+  overflow: visible;
+  border: 0;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+p {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+label {
+  display: inline-block;
+  margin-bottom: 0.4rem;
+}
+
+label,
+.btn {
+  margin-left: 0;
+  font-size: 1rem;
+}
+
+button,
+input,
+select {
+  margin: 0;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  overflow: visible;
+  text-transform: none;
+}
+
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner,
+button::-moz-focus-inner {
+  padding: 0;
+  border-style: none;
+}
+
+input[type="checkbox"],
+input[type="radio"] {
+  box-sizing: border-box;
+  padding: 0;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0 0.5rem 0 0;
+}
+
+h4 {
+  font-family: inherit;
+  line-height: 1.8;
+  font-weight: 300;
+  color: inherit;
+  font-size: 1.1rem;
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+}
+
+.btn {
+  display: inline-block;
+  font-weight: 400;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: middle;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  border: 1px solid transparent;
+  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
+    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  background-color: transparent;
+  background-image: none;
+  color: #25a5f7;
+  border-color: #25a5f7;
+  padding: 0.25rem 0.5rem;
+  line-height: 1.5;
+  border-radius: 1rem;
+  -webkit-appearance: button;
+  cursor: pointer;
+}
+
+.btn:hover {
+  color: #fff;
+  background-color: #25a5f7;
+  border-color: #25a5f7;
+}
+
+.btn:hover {
+  text-decoration: none;
+}
+
+.input-item {
+  position: relative;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 100%;
+  height: 3rem;
+}
+
+.input-item:last-child {
+  margin-bottom: 0;
+}
+
+.input-item > select,
+.input-item > input[type="text"],
+.input-item > input[type="date"] {
+  position: relative;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  width: 1%;
+  margin-bottom: 0;
+}
+
+.input-item > select:not(:last-child),
+.input-item > input[type="text"]:not(:last-child),
+.input-item > input[type="date"]:not(:last-child) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.input-item > select:not(:first-child),
+.input-item > input[type="text"]:not(:first-child),
+.input-item > input[type="date"]:not(:first-child) {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.input-item-prepend {
+  margin-right: -1px;
+}
+
+.input-item-text,
+input[type="text"],
+input[type="date"],
+select {
+  height: calc(2.2rem + 2px);
+}
+
+.input-item-text {
+  width: 6rem;
+  text-align: justify;
+  padding: 0.4rem 0.7rem;
+  display: inline-block;
+  text-justify: distribute-all-lines;
+  /*ie6-8*/
+  text-align-last: justify;
+  /* ie9*/
+  -moz-text-align-last: justify;
+  /*ff*/
+  -webkit-text-align-last: justify;
+  /*chrome 20+*/
+  -ms-flex-align: center;
+  align-items: center;
+  margin-bottom: 0;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #495057;
+  text-align: center;
+  white-space: nowrap;
+  background-color: #e9ecef;
+  border: 1px solid #ced4da;
+  border-radius: 0.25rem;
+  border-bottom-right-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.input-item-text input[type="checkbox"],
+.input-item-text input[type="radio"] {
+  margin-top: 0;
+}
+
+.input-card {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  word-wrap: break-word;
+  background-color: #fff;
+  background-clip: border-box;
+  border-radius: 0.25rem;
+  width: 22rem;
+  border-width: 0;
+  border-radius: 0.4rem;
+  box-shadow: 0 2px 6px 0 rgba(114, 124, 245, 0.5);
+  position: fixed;
+  bottom: 1rem;
+  right: 1rem;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  padding: 0.75rem 1.25rem;
+}
+
+.input-text {
+  line-height: 2rem;
+  margin-right: 2rem;
+}
+
+.info hr {
+  margin-right: 0;
+  margin-left: 0;
+  border-top-color: grey;
+}
+
+.info {
+  padding: 0.75rem 1.25rem;
+  margin-bottom: 1rem;
+  border-radius: 0.25rem;
+  position: fixed;
+  top: 1rem;
+  background-color: white;
+  width: auto;
+  min-width: 22rem;
+  border-width: 0;
+  right: 1rem;
+  box-shadow: 0 2px 6px 0 rgba(114, 124, 245, 0.5);
+}
+
+.code {
+  left: 1.5rem;
+  right: 1.5rem;
+  top: 1.5rem;
+  bottom: 1.5rem;
+  overflow: auto;
+  margin-bottom: 0rem;
+}
+
+.code .btn {
+  top: 1rem;
+  position: absolute;
+  right: 1rem;
+}
+
+.code .result {
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 0.5rem;
+  padding: 1rem;
+  bottom: 1rem;
+  position: absolute;
+  top: 5.5rem;
+  right: 1rem;
+  left: 1rem;
+  overflow: auto;
+}
+
+.code .status {
+  color: #80adff;
+  display: inline-block;
+  font-size: 14px;
+}
+
+.code h4 {
+  display: inline-block;
+  max-width: 20rem;
+  margin-right: 1rem;
+  margin-bottom: 1rem;
+}
+
+select,
+input[type="text"],
+input[type="date"] {
+  display: inline-block;
+  width: 100%;
+  padding: 0.375rem 1.75rem 0.375rem 0.75rem;
+  line-height: 1.5;
+  color: #495057;
+  vertical-align: middle;
+  background: #fff
+    url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E")
+    no-repeat right 0.75rem center;
+  background-size: 8px 10px;
+  border: 1px solid #ced4da;
+  border-radius: 0.25rem;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
+input[type="text"],
+input[type="date"] {
+  background: #fff;
+  padding: 0.375rem 0.75rem;
+}
+
+select:focus,
+input[type="text"]:focus,
+input[type="date"]:focus {
+  border-color: #80bdff;
+  outline: 0;
+  box-shadow: 0 0 0 0.1rem rgba(128, 189, 255, 0.1);
+}
+
+.btn:focus {
+  outline: 0;
+  box-shadow: none;
+}
+
+select:focus::-ms-value,
+input[type="text"]:focus::-ms-value,
+input[type="date"]:focus::-ms-value {
+  color: #495057;
+  background-color: #fff;
+}
+
+/* native toastr */
+.native-toast {
+  position: fixed;
+  background-color: rgba(50, 50, 50, 0.8);
+  border-radius: 33px;
+  color: white;
+  left: 50%;
+  text-align: center;
+  padding: 6px 12px;
+  opacity: 0;
+  z-index: 99999;
+  transition: transform 0.25s, opacity 0.25s, top 0.25s;
+  box-sizing: border-box;
+}
+
+.native-toast-bottom {
+  bottom: 50px;
+  -ms-transform: translateX(-50%) translateY(50px);
+  transform: translateX(-50%) translateY(50px);
+}
+
+.native-toast-bottom.native-toast-shown {
+  opacity: 1;
+  -ms-transform: translateX(-50%) translateY(0);
+  transform: translateX(-50%) translateY(0);
+}
+
+.native-toast-bottom.native-toast-edge {
+  bottom: 0;
+}
+
+.native-toast-top {
+  top: 50px;
+  -ms-transform: translateX(-50%) translateY(-50px);
+  transform: translateX(-50%) translateY(-50px);
+}
+
+.native-toast-top.native-toast-shown {
+  opacity: 1;
+  -ms-transform: translateX(-50%) translateY(0);
+  transform: translateX(-50%) translateY(0);
+}
+
+.native-toast-top.native-toast-edge {
+  top: 0;
+}
+
+.native-toast-center {
+  top: 0;
+  -ms-transform: translateX(-50%) translateY(-50px);
+  transform: translateX(-50%) translateY(-50px);
+}
+
+.native-toast-center.native-toast-shown {
+  opacity: 1;
+  top: 50%;
+  -ms-transform: translateX(-50%) translateY(-50%);
+  transform: translateX(-50%) translateY(-50%);
+}
+
+.native-toast-edge {
+  border-radius: 0;
+  width: 100%;
+  text-align: left;
+}
+
+@media screen and (min-width: 40rem) {
+  .native-toast:not(.native-toast-edge) {
+    max-width: 18rem;
+  }
+}
+
+/*
+  max-width does not seem to work in small screen?
+*/
+
+/*@media screen and (max-width: 768px) {
+  .native-toast:not(.native-toast-edge) {
+    max-width: 400px;
+  }
+}
+
+@media screen and (max-width: 468px) {
+  .native-toast:not(.native-toast-edge) {
+    max-width: 300px;
+  }
+}*/
+
+/* types */
+
+.native-toast-error {
+  background-color: #d92727;
+  color: white;
+}
+
+.native-toast-success {
+  background-color: #62a465;
+  color: white;
+}
+
+.native-toast-warning {
+  background-color: #fdaf17;
+  color: white;
+}
+
+.native-toast-info {
+  background-color: #5060ba;
+  color: white;
+}
+
+[class^="native-toast-icon-"] {
+  vertical-align: middle;
+  margin-right: 8px;
+}
+
+[class^="native-toast-icon-"] svg {
+  width: 16px;
+  height: 16px;
+}