前端转vue

index.vue 8.3KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276
  1. <template>
  2. <a-select ref="selectRef" v-model:value="localValue" placeholder="请选择" @change="onChange" @select="onSelect"
  3. v-bind="$attrs">
  4. <a-select-option v-for="item in localOptions" :key="item[localfieldNames.value]"
  5. :value="item[localfieldNames.value]" v-bind="item">
  6. {{ item[localfieldNames.label] }}
  7. </a-select-option>
  8. </a-select>
  9. </template>
  10. <script setup lang="jsx">
  11. import { isEmpty } from '@/utils/validate'
  12. import { getOptions } from '@/api/common'
  13. import { ref, defineProps, defineExpose, defineEmits, onMounted, onBeforeUnmount, watch, nextTick, computed } from 'vue';
  14. const emits = defineEmits(['update:value', 'onChange', 'onSelect']);
  15. const props = defineProps({
  16. value: {
  17. type: [String, Array, Number],
  18. default: '',
  19. required: true
  20. },
  21. url: {
  22. type: String,
  23. default: ''
  24. },
  25. tableName: {
  26. type: String,
  27. default: ''
  28. },
  29. colName: {
  30. type: String,
  31. default: ''
  32. },
  33. options: {
  34. type: Array,
  35. default: () => []
  36. },
  37. formItemProps: {
  38. type: Object,
  39. default: () => { }
  40. },
  41. selectType: {
  42. type: String,
  43. default: ''
  44. },
  45. pageInterfaceNo: {
  46. type: String,
  47. default: ''
  48. },
  49. sobNo: {
  50. type: String,
  51. default: ''
  52. },
  53. correct: {
  54. type: Boolean,
  55. default: false
  56. },
  57. cascadeFlag: {
  58. type: Boolean,
  59. default: false
  60. },
  61. fieldNames: {
  62. type: Object,
  63. default: () => {
  64. return {
  65. value: 'item_no',
  66. label: 'item_name'
  67. }
  68. }
  69. }
  70. });
  71. const selectRef = ref(null);
  72. const localOptions = ref([]);
  73. const localfieldNames = ref(props.fieldNames);
  74. const localValue = computed({
  75. get: () => {
  76. console.log('wyq:pro-select-获取localValue值:', props.value);
  77. return props.value;
  78. },
  79. set: (value) => {
  80. console.log('wyq:pro-select-更改localValue值:', value);
  81. emits('update:value', value);
  82. }
  83. });
  84. watch(() => props.options, (newOptions) => {
  85. localOptions.value = newOptions;
  86. });
  87. if (props.selectType === 'accLvl') {
  88. watch(() => props.sobNo, async () => {
  89. // 监听
  90. console.log('wyq:pro-select-监听sobNo值:', props.sobNo);
  91. await getAccLvlOptionsData();
  92. });
  93. }
  94. const onSelect = (value, option) => {
  95. emits('onSelect', value, option);
  96. }
  97. const onChange = (value, option) => {
  98. console.log('wyq:pro-select-更改localValue值:', value, option);
  99. emits('onChange', value, option);
  100. }
  101. onMounted(async () => {
  102. await getLocalOptionsData();
  103. });
  104. async function getLocalOptionsData () {
  105. if (!isEmpty(props.options)) {
  106. localOptions.value = props.options;
  107. } else if (!isEmpty(props.selectType)) {
  108. if (props.selectType === 'relationNo') {
  109. await getDepartRelationOptionsData();
  110. } else if (props.selectType === 'accLvl') {
  111. await getAccLvlOptionsData();
  112. } else if (props.selectType === 'curr') {
  113. await getCurOptionsData();
  114. } else if (props.selectType === 'perSys') {
  115. await getPerSysOptionsData();
  116. } else if (props.selectType === 'periodic') {
  117. await getPeriodicOptionsData();
  118. }
  119. } else {
  120. let queyUrl = '';
  121. let params;
  122. if (!isEmpty(props.tableName) && !isEmpty(props.colName)) {
  123. queyUrl = '/system/select/options/loadTbl'
  124. params = {
  125. tableName: props.tableName,
  126. colName: props.colName
  127. }
  128. } else {
  129. queyUrl = props.url;
  130. params = {};
  131. }
  132. if (queyUrl) {
  133. await getOptions(queyUrl, params).then((response) => {
  134. if (response != null) {
  135. localOptions.value = response
  136. }
  137. })
  138. if (!isEmpty(localOptions.value) && localOptions.value.length > 0) {
  139. const defaultOption = findOptionByField('is_default', 'Y');
  140. if (!isEmpty(defaultOption)) {
  141. localValue.value = defaultOption[localfieldNames.value.value];
  142. emits('onSelect', localValue.value, defaultOption);
  143. }
  144. }
  145. }
  146. }
  147. }
  148. async function getAccLvlOptionsData () {
  149. if (!isEmpty(props.sobNo)) {
  150. let queyUrl = '/system/common/action/serachAccLvl';
  151. let params = {
  152. sob_no: props.sobNo,
  153. addEndFlag: props.addEndFlag
  154. }
  155. await getOptions(queyUrl, params).then((response) => {
  156. if (response != null) {
  157. localOptions.value = response
  158. }
  159. })
  160. if (!isEmpty(localOptions.value) && localOptions.value.length > 0) {
  161. const defaultOption = localOptions.value[localOptions.value.length - 1];
  162. if (!isEmpty(defaultOption)) {
  163. localValue.value = defaultOption[localfieldNames.value.value];
  164. emits('onSelect', localValue.value, defaultOption);
  165. }
  166. }
  167. }
  168. }
  169. async function getDepartRelationOptionsData () {
  170. let queyUrl = '/system/select/options/relationInfoNo.do';
  171. let params = {
  172. pageInterfaceNo: props.pageInterfaceNo
  173. };
  174. await getOptions(queyUrl, params).then((response) => {
  175. if (response != null) {
  176. localOptions.value = response
  177. }
  178. })
  179. if (!isEmpty(localOptions.value) && localOptions.value.length > 0) {
  180. const option = findOption("AAAAAA");
  181. console.log('wyq:pro-select-获取departRelationOptionsData值:', localOptions.value, option);
  182. if (!isEmpty(option)) {
  183. localValue.value = option[localfieldNames.value.value];
  184. emits('onSelect', localValue.value, option);
  185. }
  186. }
  187. }
  188. async function getCurOptionsData () {
  189. let queyUrl = '/system/select/options/currencyLoad.do';
  190. let params = {
  191. correct: props.correct
  192. };
  193. await getOptions(queyUrl, params).then((response) => {
  194. if (response != null) {
  195. localOptions.value = response
  196. }
  197. })
  198. if (!isEmpty(localOptions.value) && localOptions.value.length > 0) {
  199. let defaultValue = '';
  200. queyUrl = '/im/dhc/zz/automake/zzmanage/report/GetForeignCurConttroller.do';
  201. params = {};
  202. await getOptions(queyUrl, params).then((response) => {
  203. if (response != null) {
  204. defaultValue = response.foreign_cur_no;
  205. }
  206. })
  207. const option = findOption(defaultValue);
  208. if (!isEmpty(option)) {
  209. localValue.value = option[localfieldNames.value.value];
  210. emits('onSelect', localValue.value, option);
  211. }
  212. }
  213. }
  214. async function getPerSysOptionsData () {
  215. let queyUrl = '/system/select/options/getSystemInfo.do';
  216. let params = {
  217. cascadeFlag: props.cascadeFlag
  218. }
  219. await getOptions(queyUrl, params).then((response) => {
  220. if (response != null) {
  221. localOptions.value = response
  222. localfieldNames.value = {
  223. value: 'ITEM_NO',
  224. label: 'ITEM_NAME'
  225. }
  226. }
  227. })
  228. console.log('wyq:pro-select-获取getPerSysOptionsData值:', localfieldNames.value);
  229. console.log('wyq:pro-select-获取getPerSysOptionsData值:', localOptions.value);
  230. }
  231. async function getPeriodicOptionsData () {
  232. let queyUrl = '/system/select/options/periodicComponent.do';
  233. let params = {
  234. cycTypeField: 'zcfzb'
  235. }
  236. await getOptions(queyUrl, params).then((response) => {
  237. if (response != null) {
  238. localOptions.value = response
  239. }
  240. })
  241. if (!isEmpty(localOptions.value) && localOptions.value.length > 0) {
  242. const defaultOption = findOptionByField('is_default', 'Y');
  243. if (!isEmpty(defaultOption)) {
  244. const defaultValue = defaultOption[localfieldNames.value.value];
  245. localValue.value = defaultValue;
  246. console.log('wyq:pro-select-获取CycType值:', defaultValue, defaultOption);
  247. emits('onSelect', defaultValue, defaultOption);
  248. }
  249. }
  250. }
  251. const findOption = (value) => {
  252. return findOptionByField(localfieldNames.value.value, value);
  253. };
  254. const findOptionByField = (field, value) => {
  255. const option = localOptions.value.find(option => option[field] === value);
  256. return { ...option }
  257. };
  258. </script>