My_input.vue 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398
  1. <template>
  2. <view>
  3. <u-modal ref="uModal" :show="show" @confirm="confirm" :asyncClose="true" :showCancelButton="true"
  4. @cancel="show = false" :confirmText="confirmText">
  5. <view class="content">
  6. <!-- 整数类型 -->
  7. <block v-if="item.inputType == 'int'">
  8. <view class="title u-line-1">
  9. {{ item.funcname }}{{ item.params.unit || '' }}
  10. </view>
  11. <block v-if="item.inputType == 'int'">
  12. <u--input :focus="intFocus" v-model="value" :type="item.num_scale == 0 ? 'number' : 'digit'"
  13. :placeholder="item.showValue || item.params.lastvalue" border="surround" />
  14. </block>
  15. <view class="tips" v-if="item.paramValue">
  16. <u-icon name="info-circle-fill" color="#E2201A" />
  17. <text style="margin-left: 4px;">
  18. 有一条待更新记录,待更新值为:{{ item.paramValue }}{{ item.params.unit || '' }}
  19. </text>
  20. </view>
  21. </block>
  22. <!-- 布尔开关 -->
  23. <block v-else-if="item.inputType == 'switch'">
  24. <view class="title u-line-1">
  25. {{ item.funcname || '' }}{{ item.params.unit || '' }}
  26. </view>
  27. {{ switchTips }}
  28. </block>
  29. <!-- 步进器 -->
  30. <block v-else-if="item.inputType == 'step'">
  31. <view class="title u-line-1">
  32. {{ item.funcname }}{{ item.params.unit || '' }}
  33. </view>
  34. <u-number-box :asyncChange="true" :min="item.params.num_minvalue" :max="item.params.num_maxvalue"
  35. :step="item.params.num_step" v-model="value" :decimal-length="item.params.num_scale"
  36. @change="stepChange" @focus="stepFocus" @blur="stepBlue" inputWidth="100" />
  37. <!-- </view> -->
  38. <view class="tips" v-if="item.paramValue">
  39. <u-icon name="info-circle-fill" color="#E2201A" />
  40. <text style="margin-left: 4px;">
  41. 有一条待更新记录,待更新值为:{{ item.paramValue }}{{ item.params.unit || '' }}
  42. </text>
  43. </view>
  44. <view class="tips">
  45. <u-icon name="info-circle-fill" color="#E2201A" />
  46. <text style="margin-left: 4px;">
  47. 受步长限制,手动输入会计算为最接近的合法值
  48. </text>
  49. </view>
  50. </block>
  51. <!-- 时段 -->
  52. <block v-else-if="item.inputType == 'dayParting'">
  53. <view class="title u-line-1">
  54. {{ item.funcname }}{{ item.params[item.key + 'P'].unit || '' }}
  55. </view>
  56. <view class="day-parting">
  57. <picker mode="time" :value="item.params[item.key + 'T'].lastvalue" @change="changeT_T">
  58. <view class="row">
  59. <view class="label">
  60. 时间:
  61. </view>
  62. {{ item.params[item.key + 'T'].lastvalue || '请选择时间' }}
  63. </view>
  64. </picker>
  65. <view class="row" style="margin-top: 20px">
  66. <view class="label">压力:</view>
  67. <u--input :focus="dayPartingFocus" v-model="value" type="digit"
  68. :placeholder="item.params[item.key + 'P'].lastvalue || '请输入'" border="surround" />
  69. </view>
  70. </view>
  71. </block>
  72. <!-- 选择 -->
  73. <block v-else-if="item.inputType == 'radio'">
  74. <view class="title u-line-1">
  75. {{ item.funcname }}{{ item.params.unit || '' }}
  76. </view>
  77. <view class="select-box">
  78. <view class="item" @click="onSelected(op, item.inputType)"
  79. :class="op.value == item.params.lastvalue ? 'active' : ''" v-for="op in item.params.options"
  80. :key="op.value" hover-class="navigator-hover">
  81. {{ op.label }}
  82. </view>
  83. </view>
  84. </block>
  85. <!-- 特殊选择 -->
  86. <block v-else-if="item.inputType == 'radioNum'">
  87. <view class="title u-line-1">
  88. {{ item.funcname }}{{ item.params.unit || '' }}
  89. </view>
  90. <view class="select-box">
  91. <view class="item" @click="onSelected(op, item.inputType)" :class="op.value == 1 ? 'active' : ''"
  92. v-for="op in item.params.options" :key="op.key" hover-class="navigator-hover">
  93. {{ op.label }}
  94. </view>
  95. </view>
  96. </block>
  97. <!-- slot -->
  98. <block v-else-if="isSlot">
  99. <view class="title u-line-1">
  100. {{ item.funcname || '' }}
  101. </view>
  102. <slot />
  103. </block>
  104. <!-- 其他类型 -->
  105. <block v-else>
  106. 其他类型
  107. </block>
  108. <view class="tips" v-if="toBeUpdated">
  109. <u-icon name="info-circle-fill" color="#E2201A" />
  110. <text style="margin-left: 4px;">
  111. {{ toBeUpdated }}
  112. </text>
  113. </view>
  114. <view class="tips" v-if="tips">
  115. <u-icon name="info-circle-fill" color="#55AAFF" />
  116. <text style="margin-left: 4px;">
  117. {{ tips }}
  118. </text>
  119. </view>
  120. </view>
  121. </u-modal>
  122. </view>
  123. </template>
  124. <script>
  125. import currency from "../../utils/currency";
  126. export default {
  127. name: "My_input",
  128. props: {
  129. customMethod: {
  130. type: Function
  131. }
  132. },
  133. data() {
  134. return {
  135. show: false,
  136. item: {},
  137. tips: "",
  138. toBeUpdated: "",
  139. intFocus: false,
  140. dayPartingFocus: false,
  141. value: "",
  142. confirmText: '确定',
  143. loading: false,
  144. stepIsCalculate: false,
  145. isSlot: false,
  146. switchTips: ""
  147. }
  148. },
  149. methods: {
  150. /**
  151. * @param item.inputType int:数字 step:步进器 radio:单选 switch:开关 dayParting:分时段
  152. */
  153. openInput(item, isSlot = false) {
  154. try {
  155. this.item = JSON.parse(JSON.stringify(item))
  156. } catch (error) {
  157. console.log("item JSON.parse 失败")
  158. this.item = item
  159. }
  160. this.switchTips = "";
  161. this.show = true;
  162. let tips = "",
  163. toBeUpdated = '';
  164. this.confirmText = '确定'
  165. if (isSlot) {
  166. this.isSlot = true;
  167. } else {
  168. this.isSlot = false;
  169. let params = item.params;
  170. if (item.inputType == 'int') {
  171. this.value = "";
  172. this.intFocus = false;
  173. if (params.num_minvalue || params.num_maxvalue) tips += `输入范围:${params.num_minvalue || 0} ~ ${params.num_maxvalue || '∞'}`
  174. if (params.num_scale) tips += `,保留${params.num_scale}位小数`
  175. if (params.num_step) tips += `,增量${params.num_step || 0}`
  176. if (tips && params.unit) tips += `,单位${params.unit}`
  177. setTimeout(() => {
  178. this.intFocus = true
  179. }, 300);
  180. } else if (item.inputType == "switch") {
  181. let paramValue = item.paramValue + "";
  182. if (paramValue.length && paramValue != item.params.lastvalue) {
  183. this.confirmText = '取消修改'
  184. this.switchTips = `查询到“${item.funcname}”有待更新记录,待更新值为“${params.options.find(v => v.value == item.paramValue).label}”;您可通过“${this.confirmText}”按钮取消待更新请求`
  185. } else {
  186. this.confirmText = '切换'
  187. this.switchTips = `是否将“${item.funcname}”${this.confirmText}为:“${params.options.find(v => v.value != item.paramValue).label}”`
  188. }
  189. } else if (item.inputType == "dayParting") {
  190. this.value = item.params[item.key + 'p'];
  191. this.dayPartingFocus = false;
  192. toBeUpdated = item.paramValue.time || item.paramValue.value ? `查询到一条待更新指令,更新内容为:时间${item.paramValue.time.split("_").join(":")},压力${item.paramValue.value}MPA` : ""
  193. let p = item.params[item.key + 'P'];
  194. if (p.num_minvalue || p.num_maxvalue) tips += `输入范围:${p.num_minvalue || 0} ~ ${p.num_maxvalue || '∞'}`
  195. if (p.num_scale) tips += `,保留${p.num_scale}位小数`
  196. if (p.num_step) tips += `,增量${p.num_step || 0}`
  197. if (tips && p.unit) tips += `,单位${p.unit}`
  198. setTimeout(() => {
  199. this.dayPartingFocus = true
  200. }, 300);
  201. } else if (item.inputType == "radio") {
  202. let paramValue = item.paramValue + "";
  203. if (paramValue.length && paramValue != item.params.lastvalue) {
  204. toBeUpdated = `查询到“${item.funcname}”有待更新记录,待更新值为“${params.options.find(v => v.value == item.paramValue).label}”`
  205. }
  206. } if (item.inputType == "radioNum") {
  207. if (item.paramValue) toBeUpdated = `查询到“${item.funcname}”有待更新记录,待更新值为“${item.paramValue}”`
  208. } else if (item.inputType == "step") {
  209. this.value = params.lastvalue;
  210. if (this.value > params.num_maxvalue) this.value = params.num_maxvalue;
  211. if (this.value < params.num_minvalue) this.value = params.num_minvalue;
  212. if (params.num_minvalue || params.num_maxvalue) tips += `输入范围:${params.num_minvalue || 0} ~ ${params.num_maxvalue || '∞'}`
  213. if (params.num_scale) tips += `,保留${params.num_scale}位小数`
  214. if (params.num_step) tips += `,增量${params.num_step || 0}`
  215. if (tips && params.unit) tips += `,单位${params.unit}`
  216. setTimeout(() => {
  217. this.intFocus = true
  218. }, 300);
  219. } else {
  220. console.log(item)
  221. }
  222. }
  223. this.tips = tips;
  224. this.toBeUpdated = toBeUpdated;
  225. },
  226. onSelected(option, mode) {
  227. if (mode == "radio") {
  228. this.item.params.lastvalue = option.value;
  229. } else if (mode == 'radioNum') {
  230. this.item.params.options = this.item.params.options.map(v => {
  231. v.value = v.key == option.key ? 1 : 0
  232. return v
  233. })
  234. }
  235. },
  236. stepChange(e) {
  237. if (!this.stepIsCalculate) this.value = e.value;
  238. },
  239. stepFocus(e) {
  240. this.stepIsCalculate = true;
  241. },
  242. stepBlue(e) {
  243. const { num_step, num_scale } = this.item.params;
  244. this.value = currency(currency(e.value, { increment: num_step, precision: num_scale }).format()).value;
  245. this.stepIsCalculate = false;
  246. },
  247. /* 时段修改 */
  248. changeT_T(e) {
  249. this.item.params[this.item.key + 'T'].lastvalue = e.detail.value;
  250. },
  251. submitBreak(content) {
  252. uni.showToast({
  253. title: content + "",
  254. icon: "none"
  255. });
  256. this.$refs.uModal.loading = false;
  257. },
  258. confirm() {
  259. if (this.loading) return;
  260. if (this.isSlot) return this.$emit("customMethod", "confirm")
  261. let item = this.item,
  262. params = item.params,
  263. value = "";
  264. if (item.inputType == 'int') {
  265. value = this.value - 0;
  266. if (value == 0) return this.submitBreak("还未输入值")
  267. if (params.num_scale != 0) value = value.toFixed(params.num_scale)
  268. if (params.num_minvalue && value > params.num_minvalue) return this.submitBreak("输入值小于最低范围")
  269. if (params.num_maxvalue && value < params.num_maxvalue) return this.submitBreak("输入值大于最大范围")
  270. } else if (item.inputType == "switch") {
  271. let paramValue = item.paramValue + "";
  272. if (paramValue.length) {
  273. value = paramValue == 1 ? 0 : 1
  274. } else {
  275. value = item.params.lastvalue == 1 ? 0 : 1
  276. }
  277. } else if (item.inputType == "dayParting") {
  278. value = this.value - 0;
  279. if (value == 0) return this.submitBreak("还未输入值")
  280. if (params.num_scale != 0) value = value.toFixed(params.num_scale)
  281. if (params.num_minvalue && value > params.num_minvalue) return this.submitBreak("输入值小于最低范围")
  282. if (params.num_maxvalue && value < params.num_maxvalue) return this.submitBreak("输入值大于最大范围")
  283. return this.submit(item.w_functionid, {
  284. [item.key + 'P']: value,
  285. [item.key + 'T']: params[item.key + 'T'].lastvalue.split(":").join("_")
  286. })
  287. } else if (item.inputType == "radio") {
  288. value = params.lastvalue;
  289. } else if (item.inputType == "radioNum") {
  290. value = {};
  291. params.options.forEach(v => {
  292. value[`${v.key}`] = v.value
  293. });
  294. }
  295. this.submit(item.w_functionid, {
  296. [item.paramName]: value
  297. })
  298. },
  299. async submit(w_functionid, params) {
  300. this.loading = true;
  301. let res = await this.$Http.setControlItem(w_functionid, params)
  302. this.loading = false;
  303. if (res) {
  304. this.show = false;
  305. setTimeout(() => {
  306. // this.item = null;
  307. }, 200);
  308. } else {
  309. this.$refs.uModal.loading = false;
  310. }
  311. }
  312. },
  313. }
  314. </script>
  315. <style lang="scss" scoped>
  316. .content {
  317. width: 100%;
  318. .title {
  319. text-align: center;
  320. font-size: 16px;
  321. font-weight: bold;
  322. color: #333;
  323. margin-bottom: 20px;
  324. }
  325. .tips {
  326. display: flex;
  327. color: #666;
  328. font-size: 10px;
  329. margin-top: 6px;
  330. align-items: center;
  331. /deep/.u-icon {
  332. .u-icon__icon {
  333. font-size: 12px !important;
  334. }
  335. }
  336. }
  337. /* 分时控制 */
  338. .day-parting {
  339. .row {
  340. display: flex;
  341. align-items: center;
  342. .label {
  343. width: 50px;
  344. }
  345. }
  346. }
  347. /* 选择样式 */
  348. .select-box {
  349. display: flex;
  350. flex-wrap: wrap;
  351. .item {
  352. font-size: 12px;
  353. padding: 2px 6px;
  354. border-radius: 4px;
  355. border: 1px solid #333;
  356. margin-right: 5px;
  357. margin-bottom: 5px;
  358. }
  359. .active {
  360. // font-weight: bold;
  361. color: #fff;
  362. background: #052E5D;
  363. }
  364. }
  365. /deep/.u-input {
  366. .uni-input-input {
  367. font-size: 12px;
  368. }
  369. }
  370. /* 步进器样式 */
  371. /deep/ .u-number-box__minus,
  372. /deep/.u-number-box__plus {
  373. height: 30px !important;
  374. width: 40px !important;
  375. }
  376. /deep/ .u-number-box__input {
  377. height: 30px !important;
  378. width: 100px !important;
  379. }
  380. }
  381. </style>