阅行客电子档案
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

469 lines
17 KiB

2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
  1. <template>
  2. <div class="des-form">
  3. <el-form ref="form" :model="form" :rules="rules" :hide-required-asterisk="isDisabled" size="small" label-width="80px">
  4. <el-row>
  5. <el-col :span="16">
  6. <el-form-item label="字段名称" prop="fieldCnName">
  7. <el-input v-model="form.fieldCnName" :disabled="isDisabled" />
  8. </el-form-item>
  9. <el-form-item label="字段标识" prop="fieldName" class="inline-error-item" :inline-message="true">
  10. <el-input v-if="isDisabled" v-model="form.fieldName" disabled />
  11. <el-input v-else v-model="form.fieldName" :disabled="!isAdd" />
  12. </el-form-item>
  13. <el-form-item label="字段类型" prop="isDataType">
  14. <el-input v-if="isDisabled" v-model="form.isDataTypeTxt" disabled />
  15. <el-select v-else v-model="form.isDataType" placeholder="" :disabled="!isAdd">
  16. <el-option v-for="item in dataTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
  17. </el-select>
  18. </el-form-item>
  19. <el-form-item label="字段长度" prop="isColumnLength">
  20. <el-input v-if="isDisabled" v-model="form.isColumnLength" type="number" placeholder="" disabled />
  21. <el-input v-else v-model.number="form.isColumnLength" type="number" placeholder="" :disabled="!isAdd" />
  22. </el-form-item>
  23. <el-form-item label="著录形式" prop="isInputClass">
  24. <el-input v-if="isDisabled" v-model="form.isInputClassTxt" disabled />
  25. <el-select v-else v-model="form.isInputClass" placeholder="" @change="selectInputClass">
  26. <el-option v-for="item in inputClassOptions" :key="item.value" :label="item.label" :value="item.value" />
  27. </el-select>
  28. </el-form-item>
  29. <el-form-item label="对应数据" prop="dictionaryId">
  30. <el-input v-if="isDisabled" v-model="form.dictionaryId.dictionaryName" disabled />
  31. <!-- @change="selectDictionary" -->
  32. <div v-else class="dictionary-selected">
  33. <el-select v-model="form.mateData" class="dictionary-left" placeholder="" value-key="id" :disabled="form.isInputClass !== 'select' && form.isInputClass !== 'popover'" @change="changeDictType">
  34. <el-option v-for="item in dataOptions" :key="item.value" :label="item.label" :value="item.value" />
  35. </el-select>
  36. <el-select v-model="form.dictionaryId.id " class="dictionary-right" placeholder="" value-key="id" :disabled="form.mateData !== 3">
  37. <el-option v-for="item in dictionaryData" :key="item.id" :label="item.dictionaryName" :value="item.id" />
  38. </el-select>
  39. </div>
  40. </el-form-item>
  41. <el-form-item label="显示长度" prop="editLength">
  42. <!-- :min="46" :max="510" -->
  43. <el-input v-model="form.editLength" type="number" :disabled="isDisabled" @keyup.enter.native="changEditLength" @blur="changEditLength" />
  44. </el-form-item>
  45. <el-form-item label="默认值" prop="isDefaultValue">
  46. <el-input v-model="form.isDefaultValue" :disabled="isDisabled" />
  47. </el-form-item>
  48. </el-col>
  49. <el-col :span="8">
  50. <el-form-item class="checkbox-item">
  51. <span>整行显示</span>
  52. <el-checkbox v-model="form.isLine" name="isLine" :disabled="isDisabled" @change="changeIsLine" />
  53. </el-form-item>
  54. <el-form-item class="checkbox-item">
  55. <span>输入字段</span>
  56. <el-checkbox v-model="form.isInput" name="isInput" :disabled="isDisabled" />
  57. </el-form-item>
  58. <el-form-item class="checkbox-item">
  59. <span>必填字段</span>
  60. <el-checkbox v-model="form.isRequired" name="isRequired" :disabled="isDisabled" />
  61. </el-form-item>
  62. <el-form-item v-if="isCategory" class="checkbox-item">
  63. <span>自动生成</span>
  64. <el-checkbox v-model="form.isAutomatic" name="isAutomatic" :disabled="isDisabled" @change="changeAuto" />
  65. </el-form-item>
  66. <el-form-item class="checkbox-item">
  67. <span>值不重复</span>
  68. <el-checkbox v-model="form.isRepeat" name="isRepeat" :disabled="isDisabled" />
  69. </el-form-item>
  70. <el-form-item class="checkbox-item">
  71. <span>自动补零</span>
  72. <el-checkbox v-model="form.isFilling" name="isFilling" :disabled="isDisabled || form.isInputClass !=='number'" @change="changeSupplement" />
  73. </el-form-item>
  74. <el-form-item class="input-num" label="位数" prop="fillingDigit">
  75. <el-input v-if="isDisabled || !form.isFilling" v-model="form.fillingDigit" disabled />
  76. <!-- <el-input v-model="form.fillingDigit" type="number" :min="1" :disabled="isDisabled || !form.isSupplement" /> -->
  77. <el-input-number v-else v-model="form.fillingDigit" controls-position="right" :min="1" :disabled="isDisabled || !form.isFilling" />
  78. <span></span>
  79. </el-form-item>
  80. </el-col>
  81. </el-row>
  82. </el-form>
  83. </div>
  84. </template>
  85. <script>
  86. import { FetchDictionaryTree } from '@/api/system/dict'
  87. import { getNoFormatField } from '@/api/system/category/fileNoFormat'
  88. export default {
  89. name: 'SettingForm',
  90. components: {},
  91. props: {
  92. isCategory: {
  93. type: Boolean,
  94. required: true
  95. },
  96. isDisabled: {
  97. type: Boolean,
  98. required: true
  99. },
  100. isAdd: {
  101. type: Boolean,
  102. required: true
  103. },
  104. thisFields: {
  105. type: Object,
  106. required: true
  107. },
  108. isDesFormType: {
  109. type: String,
  110. default: ''
  111. }
  112. },
  113. data() {
  114. var checkMaxLength = (rule, value, callback) => {
  115. if (value !== undefined && (!Number.isInteger(value) || value <= 0)) {
  116. callback(new Error('请输入正整数数字值'))
  117. } else {
  118. if (this.form.isDataType === 1 && value > 2000) {
  119. callback(new Error('字符最大长度不能超过2000位'))
  120. } else if (this.form.isDataType === 2 && value > 11) {
  121. callback(new Error('数字最大长度不能超过11位'))
  122. } else {
  123. callback()
  124. }
  125. }
  126. }
  127. var checkFieldName = (rule, value, callback) => {
  128. const reg = /^(([A-Za-z][A-Za-z_]*[a-zA-Z])|([A-Za-z]))$/
  129. if (reg.test(value)) {
  130. callback()
  131. } else {
  132. callback(new Error('字段标识只能由字母、字符“_”组成,并且必须以字母开头和结尾'))
  133. }
  134. }
  135. // 显示长度限制
  136. var checkEditLength = (rule, value, callback) => {
  137. if (this.form.editLength && this.form.editLength > 578) {
  138. callback(new Error('显示长度最大578'))
  139. } else if (this.form.editLength && this.form.editLength < 46) {
  140. callback(new Error('显示长度最小46'))
  141. } else {
  142. callback()
  143. }
  144. }
  145. // 对应字典必填判断
  146. var checkDictionaryConfigId = (rule, value, callback) => {
  147. if ((this.form.isInputClass === 'select' || this.form.isInputClass === 'popover') && !this.form.dictionaryId.id && this.form.mateData === 3) {
  148. callback(new Error('对应字典项不可为空!'))
  149. } else {
  150. callback()
  151. }
  152. }
  153. // 选择'自动补零',位数必填
  154. var checkFillingDigit = (rule, value, callback) => {
  155. if (this.form.isFilling && !this.form.fillingDigit) {
  156. callback(new Error('请填写位数!'))
  157. } else {
  158. callback()
  159. }
  160. }
  161. var getRules = () => {
  162. const rules = {
  163. fieldCnName: [
  164. { required: true, message: '请输入中文名称', trigger: 'blur' },
  165. { max: 7, message: '最大长度7个字符', trigger: 'blur' }
  166. ],
  167. fieldName: [
  168. { required: true, message: '请选择字段标识', trigger: 'blur' },
  169. { validator: checkFieldName, trigger: 'blur' }
  170. ],
  171. isDataType: [
  172. { required: true, message: '请选择数据类型', trigger: 'blur' }
  173. ],
  174. isColumnLength: [
  175. { required: true, message: '请输入字段长度', trigger: 'blur' },
  176. { validator: checkMaxLength, trigger: 'blur' }
  177. ],
  178. editLength: [
  179. { validator: checkEditLength, trigger: 'blur' }
  180. ],
  181. dictionaryId: [
  182. { validator: checkDictionaryConfigId, trigger: 'blur' }
  183. ],
  184. fillingDigit: [
  185. { validator: checkFillingDigit, trigger: 'blur' }
  186. ]
  187. }
  188. if (this.isDisabled) {
  189. delete rules.isDataType
  190. }
  191. return rules
  192. }
  193. return {
  194. form: {
  195. dictionaryId: {
  196. id: null,
  197. dictionaryName: null
  198. }
  199. },
  200. rules: getRules(),
  201. // 字段类型
  202. dataTypeOptions: [
  203. { value: 1, label: '字符' },
  204. { value: 2, label: '数字' }
  205. ],
  206. // 著录形式
  207. inputClassOptions: [
  208. { value: 'select', label: '下拉框' },
  209. { value: 'popover', label: '弹出框' },
  210. { value: 'text', label: '文本框' },
  211. { value: 'number', label: '数字框' },
  212. { value: 'date', label: '日期框' },
  213. { value: 'textarea', label: '文本域' }
  214. ],
  215. // 对应字典
  216. dictionaryData: [],
  217. dataOptions: []
  218. }
  219. },
  220. watch: {
  221. thisFields(value) {
  222. this.form = value
  223. if (!this.isAdd) {
  224. this.getForm()
  225. }
  226. }
  227. },
  228. created() {
  229. },
  230. mounted() {
  231. this.form = this.thisFields
  232. console.log('isDesFormType', this.isDesFormType)
  233. if (this.isDesFormType === 'prearchiveLibrary') {
  234. this.dataOptions = [
  235. { value: 1, label: '全宗' },
  236. { value: 3, label: '字典' }
  237. ]
  238. } else {
  239. this.dataOptions = [
  240. { value: 1, label: '全宗' },
  241. { value: 2, label: '档案分类' },
  242. { value: 3, label: '字典' }
  243. ]
  244. }
  245. this.$nextTick(() => {
  246. if (!this.isAdd) {
  247. this.getForm()
  248. }
  249. })
  250. },
  251. methods: {
  252. getForm() {
  253. // 初始化
  254. this.form.isFilling = !!this.form.isFilling
  255. this.form.isLine = !!this.form.isLine
  256. this.form.isInput = !!this.form.isInput
  257. this.form.isRequired = !!this.form.isRequired
  258. this.form.isAutomatic = !!this.form.isAutomatic
  259. if (this.form.mateData !== 3) {
  260. this.dictionaryData = []
  261. this.form.dictionaryId = {
  262. id: null,
  263. dictionaryName: null
  264. }
  265. }
  266. // 字段类型
  267. if (this.form.isDataType === 1) {
  268. this.form.isDataTypeTxt = '字符'
  269. } else if (this.form.isDataType === 2) {
  270. this.form.isDataTypeTxt = '数字'
  271. }
  272. // 初始化 - 著录形式
  273. switch (this.form.isInputClass) {
  274. case 'select':
  275. this.form.isInputClassTxt = '下拉框'
  276. break
  277. case 'popover':
  278. this.form.isInputClassTxt = '弹出框'
  279. break
  280. case 'text':
  281. this.form.isInputClassTxt = '文本框'
  282. break
  283. case 'number':
  284. this.form.isInputClassTxt = '数字框'
  285. break
  286. case 'date':
  287. this.form.isInputClassTxt = '日期框'
  288. break
  289. case 'textarea':
  290. this.form.isInputClassTxt = '文本域'
  291. break
  292. }
  293. if (!this.isDisabled) {
  294. // 初始化 - 著录形式 - 对应字典
  295. if (this.form.isInputClass === 'select' || this.form.isInputClass === 'popover') {
  296. this.getDictrionaryList()
  297. } else {
  298. this.dictionaryData = []
  299. this.form.dictionaryId = {
  300. id: null,
  301. dictionaryName: null
  302. }
  303. }
  304. }
  305. },
  306. // 获取对应字典list
  307. getDictrionaryList() {
  308. FetchDictionaryTree().then(res => {
  309. this.dictionaryData = res
  310. })
  311. },
  312. // selectDictionary(value) {
  313. // this.dictionaryId = value
  314. // },
  315. changeDictType(value) {
  316. this.form.dictionaryId = {
  317. id: null,
  318. dictionaryName: null
  319. }
  320. },
  321. // 著录形式为'下拉框'、'弹出框'的,对应字典不为空,反之为空
  322. selectInputClass(value) {
  323. if (value === 'select' || value === 'popover') {
  324. this.getDictrionaryList()
  325. } else {
  326. this.dictionaryData = []
  327. this.form.mateData = null
  328. this.form.dictionaryId = {
  329. id: null,
  330. dictionaryName: null
  331. }
  332. this.form.isFilling = false
  333. this.form.fillingDigit = null
  334. }
  335. // 字段类型为数字型,且默认著录类型为数字框不可更改
  336. if (this.form.isDataType === 2 && this.form.isInputClass !== 'number') {
  337. this.form.isInputClass = 'number'
  338. this.$message.error('字段类型为数字型,默认著录类型为数字框且不能修改')
  339. }
  340. },
  341. // 显示长度 input.value>200,则自动勾选上“显示一整行”
  342. changEditLength(e) {
  343. const value = e.target.value
  344. // if (value < 46) {
  345. // this.$message.error('显示长度最小46')
  346. // this.form.editLength = 46
  347. // }
  348. if (value > 225) {
  349. this.form.isLine = true
  350. }
  351. // if (value > 510) {
  352. // this.$message.error('显示长度最大510')
  353. // this.form.editLength = 510
  354. // }
  355. },
  356. changeIsLine() {
  357. if (!this.form.isLine) {
  358. if (this.form.editLength > 225) {
  359. this.form.editLength = 225
  360. }
  361. }
  362. },
  363. // '自动补零' false - 补零位数清空
  364. changeSupplement() {
  365. if (!this.form.isFilling) {
  366. this.form.fillingDigit = undefined
  367. }
  368. if (this.form.isFilling) {
  369. // '字段类型'为数字型时,'自动补零'不可操作
  370. if (this.form.isDataType === 2) {
  371. this.form.isFilling = false
  372. this.$message.error('字段类型必须为字符型才可操作!')
  373. }
  374. // 著录形式必须-数字框
  375. if (this.form.isInputClass !== 'number') {
  376. this.form.isFilling = false
  377. this.$message.error('著录形式必须为数字框才可操作!')
  378. }
  379. if (this.form.isDataType !== 2 && this.form.isInputClass === 'number') {
  380. this.form.fillingDigit = 1
  381. }
  382. }
  383. },
  384. // 自动生成 - 规则出自“档案规则设置”页面,著录形式为“文本框”才可
  385. changeAuto(value) {
  386. if (this.form.isAutomaticField === 1) {
  387. this.form.isAutomatic = false
  388. this.$message.error('已经为档号组成项,不可设置为自动生成')
  389. } else if (this.form.isInputClass !== 'text') {
  390. this.form.isAutomatic = false
  391. this.$message.error('著录形式必须为文本框才可操作!')
  392. } else if (value) {
  393. getNoFormatField({ categoryId: this.form.categoryId }).then((res) => {
  394. const repeatIndex = res.findIndex((item) => {
  395. return item.dictionaryId === this.form.id
  396. })
  397. if (repeatIndex >= 0) {
  398. this.form.isAutomatic = false
  399. this.$message.error('已经为档号组成项,不能设为自动生成!')
  400. }
  401. })
  402. }
  403. },
  404. // submitForm(formName) {
  405. // // 对应字典必填判断
  406. // if (this.form.isInputClass === 'select' || this.form.isInputClass === 'popover') {
  407. // if (!this.form.dictionaryId.id ) {
  408. // this.$message.error('对应字典项不可为空!')
  409. // return
  410. // }
  411. // }
  412. // // 选择'自动补零',位数必填
  413. // if (this.form.isFilling) {
  414. // if (!this.form.fillingDigit) {
  415. // this.$message.error('请填写位数!')
  416. // return
  417. // }
  418. // }
  419. // // 显示长度限制
  420. // if (this.form.editLength) {
  421. // if (this.form.editLength > 510) {
  422. // this.$message.error('显示长度最大510')
  423. // return
  424. // }
  425. // }
  426. // this.$refs[formName].validate((valid) => {
  427. // if (valid) {
  428. // alert('submit!')
  429. // } else {
  430. // console.log('error submit!!')
  431. // return false
  432. // }
  433. // })
  434. // },
  435. resetForm(formName) {
  436. // this.$refs[formName].resetFields()
  437. // console.log(this.thisFields)
  438. }
  439. }
  440. }
  441. </script>
  442. <style lang="scss" scoped>
  443. .dictionary-selected{
  444. display: flex;
  445. justify-content: space-between;
  446. width: 264px;
  447. .dictionary-left{
  448. width: 104px;
  449. ::v-deep .el-input__inner{
  450. width: 104px !important;
  451. }
  452. }
  453. .dictionary-right{
  454. width: 150px;
  455. ::v-deep .el-input__inner{
  456. width: 150px !important;
  457. }
  458. }
  459. }
  460. </style>