123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135 |
- <template>
- <div id="zoneinput">
- <el-form label-position="left" :label-width="labelWidth" :model="form">
- <div v-for="(titem, tkey) in inputTypeList" :key="tkey">
- <h4>{{ tkey }}</h4>
- <el-form-item v-for="(item, key) in titem" :key="key" :label="item.InfoPointName" class="input-item">
- <el-input v-model="item.inputValue" v-if="item.InputMode == 'A1'|| item.InputMode == 'A2'" type="number">
- <template slot="append" v-if="item.Unit">{{item.Unit}}</template>
- </el-input>
- <el-input v-model="item.inputValue" v-else-if="item.InputMode == 'B1' || item.InputMode == 'L' || item.InputMode == 'M'"></el-input>
- <el-select v-model="item.inputValue" v-else-if="item.InputMode == 'D1'" placeholder="请选择">
- <el-option v-for="(soption,skey) in item.options" :key="skey" :label="soption.Name" :value="soption.Code">
- </el-option>
- </el-select>
- <el-cascader v-model="item.inputValue" v-else-if="item.InputMode == 'D1L'" placeholder="请选择"
- :props="item.props" :options="item.options" filterable :show-all-levels="false"></el-cascader>
- <el-input v-model="item.inputValue" v-else></el-input>
- </el-form-item>
- </div>
- </el-form>
- </div>
- </template>
- <script>
- export default {
- data() {
- return {
- form: {},
- inputTypeList: {},//输入框表头种类
- inputData: [],//所有输入框
- }
- },
- props: {
- labelWidth: {
- default: "130px",
- type: String
- }
- },
- created() {
- },
- methods: {
- //初始化
- init(val) {
- this.inputTypeList = {};
- this.inputData = [];
- this.inputData = val.concat()
- this.filterInput();
- this.inputGroup();
- },
- //数据过滤
- filterInput() {
- this.inputData = this.inputData.filter(item => {
- return item.Editable == true && item.Visible == true && item.FirstName && item.InfoPointCode;
- })
- let numbersInput = ['A1', 'A2'];
- let stringInput = ['B1', 'L', 'M'];
- let arrayInput = ['D1'];
- let cascaderInput = ['D1L'];
- this.inputData.map(item => {
- if (numbersInput.indexOf(item.InputMode) != -1) {
- item.inputValue = null;
- }
- else if (stringInput.indexOf(item.InputMode) != -1) {
- item.inputValue = '';
- }
- else if (arrayInput.indexOf(item.InputMode) != -1) {
- let options = JSON.parse(item.DataSource)
- item.inputValue = '';
- item.options = options;
- }
- else if(cascaderInput.indexOf(item.InputMode) != -1){
- let options = JSON.parse(item.DataSource);
- if (options[0] && options[0].Content) {
- item.props = {
- value: 'Code',
- label: 'Name',
- children: 'Content'
- }
- }
- item.options = options;
- item.inputValue = [];
- }
- else {
- item.inputValue = '';
- }
- });
- },
- //数据分组
- inputGroup() {
- this.inputData.map(item => {
- if (!this.inputTypeList[item.FirstName]) {
- this.inputTypeList[item.FirstName] = [];
- }
- this.inputTypeList[item.FirstName].push(item)
- })
- for (let key in this.inputTypeList) {
- if (this.inputTypeList[key] instanceof Array) {
- this.inputTypeList[key].sort((item1, item2) => { return item1.Sort < item2.Sort });
- }
- }
- },
- //父组件获取form
- getFormData() {
- let f = {}
- for (let key in this.inputTypeList) {
- this.inputTypeList[key].map(item => {
- if (item.inputValue != '' && item.inputValue != null) {
- if (item.inputValue instanceof Array) {
- f[item.InfoPointCode] = item.inputValue.pop();
- }
- else {
- f[item.InfoPointCode] = item.inputValue;
- }
- }
- })
- }
- return f;
- }
- }
- }
- </script>
- <style lang="less" scoped>
- .input-item {
- display: inline-block;
- position: relative;
- margin-right: 10px;
- }
- #zoneinput {
- /deep/ .el-form-item__content {
- width: 220px;
- }
- }
- </style>
|