index.vue 9.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407
  1. <script>
  2. import { REFER } from "../popover-select/api/index";
  3. export default {
  4. name: "PopoverSelectV2",
  5. props: {
  6. // v-model
  7. value: {
  8. type: [Array, String, Number],
  9. require: true,
  10. },
  11. // 参照类型 ,对应后端
  12. referName: {
  13. type: String,
  14. require: true,
  15. },
  16. // 作为 value 唯一标识的键名,绑定值
  17. valueKey: {
  18. type: String,
  19. dafault: () => {
  20. return "code";
  21. },
  22. },
  23. // 默认查询参数
  24. queryParams: {
  25. type: Function,
  26. default: () => {},
  27. },
  28. // 需映射源数据
  29. source: {
  30. type: Object,
  31. default: () => ({}),
  32. },
  33. // 参照内外映射
  34. dataMapping: {
  35. type: Object,
  36. default: () => ({}),
  37. },
  38. // 多选
  39. checkbox: {
  40. type: Boolean,
  41. default: false,
  42. },
  43. // 参照弹窗标题
  44. title: {
  45. type: String,
  46. dafault: () => {
  47. return "TITEL";
  48. },
  49. },
  50. // 赋值
  51. copy: {
  52. type: Boolean,
  53. default: () => {
  54. return false;
  55. },
  56. },
  57. clearable: {
  58. type: Boolean,
  59. default: true,
  60. },
  61. },
  62. components: {
  63. ElSuperTable: () => import("@/components/super-table/index.vue"),
  64. },
  65. data() {
  66. return {
  67. size: "mini",
  68. width: "50%",
  69. page: { pageNum: 1, pageSize: 10, total: 0 },
  70. visible: false,
  71. loading: false,
  72. model: {
  73. search: "",
  74. isPage: true,
  75. },
  76. data: [],
  77. selectData: [],
  78. };
  79. },
  80. computed: {
  81. innerValue: {
  82. get() {
  83. return this.value;
  84. },
  85. set(value) {
  86. // const {
  87. // $props: { source, dataMapping },
  88. // } = this;
  89. // for (let key in dataMapping) {
  90. // if (dataMapping[key] === "id" || dataMapping[key] === "code") {
  91. // if (source[key] && source[key] !== "") {
  92. // source[key] = undefined;
  93. // }
  94. // }
  95. // }
  96. this.$emit("input", value);
  97. },
  98. },
  99. TableColumns() {
  100. const { referName } = this.$props;
  101. return require(`../popover-select/components/${referName}`).default;
  102. },
  103. },
  104. watch: {
  105. innerValue: {
  106. handler: function (newValue) {
  107. if (!newValue) {
  108. const {
  109. $props: { source, dataMapping },
  110. } = this;
  111. for (let key in dataMapping) {
  112. source[key] = undefined;
  113. }
  114. this.$emit("update:source", source);
  115. }
  116. },
  117. },
  118. },
  119. methods: {
  120. // open dialog
  121. async open() {
  122. let { disabled } = this.$attrs;
  123. if (!disabled) {
  124. this.visible = true;
  125. await this.useReset();
  126. }
  127. },
  128. // hide dialog
  129. async hide() {
  130. this.visible = false;
  131. },
  132. // fetch list
  133. async fetchList(prop, page) {
  134. try {
  135. // try
  136. this.loading = true;
  137. const { pageNum, pageSize } = page;
  138. const { referName: type, source, queryParams } = this.$props;
  139. const { code, rows, total } = await REFER(
  140. {
  141. ...prop,
  142. ...queryParams(source),
  143. type: type,
  144. },
  145. {
  146. pageNum,
  147. pageSize,
  148. }
  149. );
  150. if (code === 200) {
  151. this.data = rows;
  152. // 处理新增字段无法映射
  153. let that = this;
  154. this.TableColumns.forEach(({ item, attr }) => {
  155. that.data = that.data.map((d) => {
  156. if (!attr.is && attr.formatter) {
  157. d[item.key] = attr.formatter(d);
  158. }
  159. return d;
  160. });
  161. });
  162. this.page.total = total;
  163. }
  164. } catch (err) {
  165. // catch
  166. console.error(err);
  167. } finally {
  168. // finally
  169. this.loading = false;
  170. }
  171. },
  172. // reset
  173. async useReset() {
  174. this.data = [];
  175. this.page.pageNum = 1;
  176. this.page.pageSize = 10;
  177. this.model.search = null;
  178. await this.fetchList(this.model, this.page);
  179. },
  180. // query
  181. async useQuery() {
  182. await this.fetchList(this.model, this.page);
  183. },
  184. // auto
  185. async useAutocomplete(prop, cb) {
  186. if (prop) {
  187. this.page.pageSize = 10;
  188. this.model.search = prop;
  189. await this.fetchList(this.model, this.page);
  190. await cb(this.data);
  191. } else {
  192. cb([]);
  193. }
  194. },
  195. // select
  196. useSelect(prop) {
  197. this.selectData = prop;
  198. },
  199. // confirm
  200. useConfirm(prop) {
  201. this.hide();
  202. const {
  203. $props: { source, checkbox, valueKey, dataMapping },
  204. } = this;
  205. if (checkbox) {
  206. this.selectData = [...prop];
  207. this.$emit(
  208. "change",
  209. this.selectData.map((item) => {
  210. for (let key in dataMapping) {
  211. item[key] = item[dataMapping[key]];
  212. }
  213. return item;
  214. }),
  215. this.$props
  216. );
  217. } else {
  218. for (let key in dataMapping) {
  219. source[key] = prop[0][dataMapping[key]];
  220. }
  221. this.innerValue = prop[0][valueKey];
  222. this.$emit("update:source", source);
  223. this.$emit("change", prop[0], this.$props);
  224. }
  225. },
  226. async handleChange() {
  227. const { referName } = this.$props;
  228. this.$emit("copyChange", this.innerValue.split(/,|,|\s+/));
  229. },
  230. useBlur() {
  231. const {
  232. $props: { source, dataMapping },
  233. } = this;
  234. for (let key in dataMapping) {
  235. if (dataMapping[key] === "id" || dataMapping[key] === "code") {
  236. if (!source[key] || source[key] === "") {
  237. this.innerValue = "";
  238. }
  239. }
  240. }
  241. },
  242. handleClear() {
  243. this.innerValue = "";
  244. },
  245. handleKeyupDel() {
  246. console.log("focus");
  247. const {
  248. $props: { source, dataMapping },
  249. } = this;
  250. for (let key in dataMapping) {
  251. if (dataMapping[key] === "id" || dataMapping[key] === "code") {
  252. if (source[key] && source[key] !== "") {
  253. source[key] = undefined;
  254. }
  255. }
  256. }
  257. },
  258. },
  259. created() {},
  260. mounted() {},
  261. destroyed() {},
  262. };
  263. </script>
  264. <template>
  265. <div class="popover-select-v2">
  266. <el-input
  267. v-if="copy"
  268. :clearable="clearable"
  269. v-bind="$attrs"
  270. v-model="innerValue"
  271. :size="size"
  272. @clear="handleClear"
  273. @change="handleChange"
  274. @keyup.enter.native="handleChange"
  275. @keyup.delete.native="handleKeyupDel"
  276. >
  277. <i :size="size" class="el-icon-search" slot="suffix" @click="open"> </i>
  278. </el-input>
  279. <el-autocomplete
  280. v-else
  281. :clearable="clearable"
  282. v-bind="$attrs"
  283. v-model="innerValue"
  284. :value-key="valueKey"
  285. :fetch-suggestions="useAutocomplete"
  286. @blur="useBlur"
  287. @select="useConfirm([$event])"
  288. style="width: 100%"
  289. >
  290. <i class="el-icon-search" slot="suffix" @click="open"> </i>
  291. <template slot-scope="{ item }">
  292. <p
  293. style="
  294. text-overflow: ellipsis;
  295. overflow: hidden;
  296. line-height: 15px;
  297. margin: 5px 0;
  298. "
  299. >
  300. {{ item.name }}
  301. </p>
  302. <p
  303. style="
  304. font-size: 12px;
  305. color: #b4b4b4;
  306. line-height: 15px;
  307. margin: 5px 0;
  308. "
  309. >
  310. {{ item.code }}
  311. </p>
  312. </template>
  313. </el-autocomplete>
  314. <el-dialog
  315. :width="width"
  316. :visible.sync="visible"
  317. :show-close="false"
  318. :close-on-click-modal="false"
  319. :close-on-press-escape="false"
  320. append-to-body
  321. >
  322. <div slot="title" style="display: flex; justify-content: space-between">
  323. <el-form
  324. :size="size"
  325. :inline="true"
  326. :model="model"
  327. @submit.native.prevent
  328. style="display: flex; flex-direction: column"
  329. >
  330. <div>
  331. <el-form-item prop="search">
  332. <el-input
  333. v-model="model.search"
  334. @change="useQuery"
  335. @keydown.enter="useQuery"
  336. >
  337. </el-input>
  338. </el-form-item>
  339. <el-form-item>
  340. <el-button icon="el-icon-search" @click="useQuery"
  341. >搜索</el-button
  342. >
  343. <el-button icon="el-icon-refresh" @click="useReset"
  344. >重置</el-button
  345. >
  346. </el-form-item>
  347. </div>
  348. </el-form>
  349. <div>
  350. <el-button
  351. type="primary"
  352. :size="$attrs.size"
  353. :loading="loading"
  354. @click="useConfirm(selectData)"
  355. >
  356. 确认
  357. </el-button>
  358. <el-button :size="$attrs.size" :loading="loading" @click="hide">
  359. 取消
  360. </el-button>
  361. </div>
  362. </div>
  363. <div
  364. v-loading="loading"
  365. style="height: 40vh; display: flex; margin-top: -30px"
  366. >
  367. <el-super-table
  368. v-model="data"
  369. :size="size"
  370. :page="page"
  371. :columns="TableColumns"
  372. :radio="!checkbox"
  373. :checkbox="checkbox"
  374. pagination
  375. highlight-current-row
  376. @pagination="useQuery"
  377. @row-select="useSelect"
  378. @row-dblclick="useConfirm([$event])"
  379. >
  380. </el-super-table>
  381. </div>
  382. </el-dialog>
  383. </div>
  384. </template>
  385. <style scoped>
  386. .popover-select-v2 .el-autocomplete {
  387. width: inherit;
  388. }
  389. .popover-select-v2 .el-autocomplete .el-icon-search {
  390. cursor: pointer;
  391. }
  392. ::v-deep .el-table--mini .el-table__cell {
  393. height: 50px;
  394. }
  395. </style>